/* Shared responsive safety layer — loaded after page-local styles. */
:root { --safe-gutter: clamp(12px, 3vw, 32px); }

html {
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

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

:where(main, section, article, aside, header, footer, nav, div, form, fieldset) {
  min-width: 0;
}

:where(p, li, td, th, label, .fen, code, pre) {
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(input, select, textarea, button) { max-width: 100%; }

:where(.modal, .modal-box, .report-box, .sr-delete-box, .hm-box) {
  max-width: min(var(--modal-width, 560px), calc(100vw - 24px)) !important;
  max-height: min(90dvh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

:where(.modal-backdrop, .modal-overlay, #report-modal, #sr-delete-modal) {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

:where(.tbl-scroll, .cycle-tbl-wrap, .table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

#board, #fa-board, #eg-board, #coord-board {
  max-width: 100% !important;
  touch-action: manipulation;
}

.bg__grid { inset: 0 !important; }

@media (max-width: 900px) {
  :where(.analysis-layout, .fa-layout, .eg-layout) {
    width: 100%;
    min-width: 0;
  }

  :where(.board-col, .fa-board-col, .eg-board-col, .fa-engine-col, .eg-engine-col) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 620px;
    margin-inline: auto;
  }

  :where(.fa-board-wrap, .fa-board-container, .eg-board-container) {
    width: 100% !important;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .nav {
    padding: 10px var(--safe-gutter) !important;
    gap: 8px !important;
  }

  .nav-links {
    width: 100%;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px !important;
    overflow: visible !important;
  }

  .nav-links a {
    flex: 1 1 auto;
    min-width: max-content;
    text-align: center;
    padding: 8px 10px;
    border-radius: 6px;
  }

  .hero { padding-top: clamp(36px, 9vw, 56px) !important; }
  .hero h1 { font-size: clamp(38px, 12vw, 58px) !important; }
  .lead { font-size: clamp(17px, 4.7vw, 20px) !important; }
  .content h2 { margin-top: 42px !important; }
  .content :where(ul, ol) { padding-left: 22px; }
  .card, .cta, .toc, .note, .fen { padding: clamp(16px, 4.5vw, 22px) !important; }

  .content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: normal;
    -webkit-overflow-scrolling: touch;
  }

  .footer-inner { justify-content: center; text-align: center; }
}

@media (max-width: 600px) {
  :where(.topbar, .top-bar, .site-header, .demo-topbar) {
    max-width: 100%;
    padding-left: var(--safe-gutter) !important;
    padding-right: var(--safe-gutter) !important;
    gap: 8px !important;
  }

  :where(.topbar__logo, .nav-logo, .logo) {
    font-size: clamp(18px, 5.5vw, 22px) !important;
    letter-spacing: clamp(1px, .7vw, 3px) !important;
  }

  .topbar__title { display: none !important; }
  .topbar__right, .topbar__left, .header-right, .demo-topbar-right {
    min-width: 0;
    gap: 6px !important;
  }

  .topbar__back {
    flex-shrink: 1;
    font-size: 10px !important;
    letter-spacing: .8px !important;
    padding-inline: 8px !important;
  }

  .i18n-menu { flex: 0 0 auto; max-width: 48px; }
  .i18n-trigger {
    gap: 3px !important;
    min-width: 42px !important;
    padding: 6px 7px !important;
    justify-content: center;
  }
  .i18n-trigger-short { display: none !important; }
  .i18n-list {
    right: 0 !important;
    left: auto !important;
    min-width: 140px !important;
    max-width: calc(100vw - 20px);
  }

  :where(.main, .home-main, .page, .page-wrap, .shell) {
    max-width: 100%;
  }

  :where(.card, .stats-wrap) { border-radius: 10px; }

  :where(.btn-primary, .btn-gold, .filter-pill, .modal-actions button, .hint-row button) {
    min-height: 42px;
  }

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

  .modal-actions, .report-btn-row {
    flex-wrap: wrap;
  }
  .modal-actions > *, .report-btn-row > * {
    flex: 1 1 130px;
  }

  .set-card__head { align-items: flex-start !important; flex-wrap: wrap; }
  .set-card__actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }

  .filter-period { width: 100%; margin-left: 0 !important; }
}

@media (max-width: 420px) {
  .brand { font-size: 20px !important; }

  .nav-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .nav-links a {
    min-width: 0;
    padding: 8px 4px;
    font-size: 10px !important;
    letter-spacing: .5px !important;
  }

  .hero, .content { padding-left: 14px !important; padding-right: 14px !important; }
  .hero h1 { font-size: clamp(36px, 11.5vw, 48px) !important; }

  .topbar__back { max-width: 64px; }
  .topbar__back span { display: none; }

  .puzzle-header { gap: 6px !important; padding: 8px !important; }
  .demo-badge { display: none; }

  .hint-row { gap: 6px !important; }
  .hint-row button { padding-inline: 5px !important; font-size: 11px !important; }

  .stats-bars-2col { grid-template-columns: 1fr !important; }
  .kpi-grid { gap: 8px !important; }
}

@media (hover: none) and (pointer: coarse) {
  :where(a, button, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
  :where(.nav-btn, .btn-hint, .filter-pill, .topbar__back) { min-height: 40px; }
}

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

@media print {
  .site-header, .topbar, .top-bar, .demo-topbar, .cta { position: static !important; }
  body { background: #fff !important; color: #111 !important; }
}