/* Mobile refinements; desktop keeps the established layout. */
.mobile-menu-toggle { display: none; }
.fighter-filter-controls { display: none; }

@media (max-width: 700px) {
  html { scroll-padding-top: 84px; }
  body:has(dialog[open]) { overflow: hidden; }
  main {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 68px;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
    gap: 12px;
    background: var(--bg);
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .header .logo { min-height: 44px; }
  .mobile-menu-toggle {
    display: inline-flex;
    margin-left: auto;
    padding: 10px 14px;
    gap: 10px;
    font-size: 14px;
  }
  .mobile-menu-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
  .header.mobile-nav-ready:not(.mobile-menu-open) nav,
  .header.mobile-nav-ready:not(.mobile-menu-open) .header-actions { display: none; }
  .header nav {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    overflow: visible;
  }
  .header nav a {
    min-height: 48px;
    padding: 12px;
    font-size: 14px;
    white-space: normal;
    border-radius: 6px;
  }
  .header nav a.active { background: var(--surface-2); color: var(--accent); }
  .header nav a.active::after { display: none; }
  .header nav b { font-size: 11px; }
  .header-actions {
    order: 4;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .language-picker, .language-picker select { width: 100%; }
  .header-actions #account-open, #spoiler-button { font-size: 12px; padding: 10px; }
  .header-actions #theme-button { justify-self: end; }
  .button, .outline-button, .icon-button, .favorite-button,
  .fighter-card-footer .icon-button, .segmented button { min-height: 44px; }
  .icon-button, .favorite-button, .fighter-card-footer .icon-button { min-width: 44px; }
  .favorite-button { z-index: 3; }
  .button, .outline-button { white-space: normal; text-align: center; gap: 10px; }
  /* 16px inputs keep forms readable and avoid automatic zoom on iPhone. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea,
  .language-picker select, .filters select,
  .comparison-selects select, .lab-comparator .comparison-selects select,
  .field-label input, .field-label textarea, .field-label select,
  .rumor-review-form input:not([type="checkbox"]), .rumor-review-form textarea {
    font-size: 16px;
    min-height: 44px;
  }
  .search-box, .search-box input, .filters select { min-width: 0; }
  .search-box { max-width: 100%; }
  .toolbar { align-items: stretch; }
  .fighter-filter-controls { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; }
  #fighter-filter-toggle { flex: 1; justify-content: space-between; font-size: 14px; }
  #fighter-filter-toggle[aria-expanded="true"] { border-color: var(--accent); }
  #fighter-filter-toggle[aria-expanded="true"] > span:last-child { transform: rotate(180deg); }
  #fighter-active-filters { display: grid; place-items: center; min-width: 24px; min-height: 24px; border-radius: 12px; background: var(--accent); color: #fff; }
  #fighter-filter-reset { font-size: 12px; }
  #fighter-filters.mobile-filters-ready:not(.mobile-filters-open) { display: none; }
  #fighter-filters { padding: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; }
  .page-heading { padding: 26px 0 22px; }
  .page-heading h1 { font-size: clamp(38px, 10vw, 52px); overflow-wrap: anywhere; }
  .page-heading p:not(.eyebrow) { font-size: 14px; line-height: 1.7; }
  .top-kicker, .top-kicker > span:last-child { font-size: 9px; }
  .info-hero .hero-copy, .hero-agenda { padding: 22px 18px; }
  .info-hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .info-hero .hero-buttons { flex-direction: column; align-items: stretch; }
  .info-hero .hero-buttons .text-link { padding: 12px 0; }
  .section-heading { flex-wrap: wrap; }
  .section-heading .text-link { max-width: none; text-align: left; font-size: 12px; padding: 8px 0; }
  .event-info { padding: 20px 16px; min-width: 0; }
  .event-info h3, .event-dialog-title { overflow-wrap: anywhere; }
  .event-filters .segmented { flex-wrap: wrap; }
  .event-filters .segmented button { font-size: 12px; }
  .data-note, .data-note small { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
  .fighter-card-body, .profile-copy, .panel, .ranking-panel { min-width: 0; }
  .fighter-name { overflow-wrap: anywhere; }
  .fighter-card-body p, .fighter-card-body .fighter-division, .card-combat-info dd { font-size: 12px; }
  .fighter-card-meta { flex-wrap: wrap; font-size: 10px; }
  .fighter-card-footer > span { font-size: 10px; letter-spacing: .5px; }
  .official-facts dt, .card-combat-info dt { font-size: 11px; }
  .official-facts dd { font-size: 14px; }
  .official-facts > p, .official-facts > p small { font-size: 12px; }
  .profile-layout .official-facts .badge { font-size: 10px; }
  .profile-copy > p:not(.eyebrow) { font-size: 13px; }
  .profile-copy h2 { font-size: clamp(36px, 10vw, 49px); overflow-wrap: anywhere; }
  dialog {
    width: calc(100% - 16px);
    max-width: 560px;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 12px 16px max(20px, env(safe-area-inset-bottom));
    border-radius: 12px;
    overscroll-behavior: contain;
    scroll-padding-top: 60px;
  }
  dialog .dialog-close {
    position: sticky;
    display: flex;
    top: 0;
    right: auto;
    margin: 0 0 8px auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
  }
  .profile-layout { gap: 20px; }
  .official-bout-names { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .bout-fighter-name { min-height: 44px; overflow-wrap: anywhere; }
  .lab-comparator .comparison-selects { grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; }
  .lab-comparator .comparison-selects label:first-child { grid-column: 1; grid-row: 1; }
  .lab-comparator .comparison-selects label:last-child { grid-column: 1; grid-row: 2; }
  .lab-comparator .comparison-selects .icon-button { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 44px; }
  .lab-comparator .comparison-selects select { padding: 12px 8px; }
  .lab-table thead th, .lab-table tbody th, .lab-value { font-size: 12px; }
  .lab-table th, .lab-table td { padding: 12px 6px; }
  .lab-fighter .text-link { font-size: 12px; display: inline-flex; align-items: center; min-height: 44px; }
  .lab-comparison-notes p { font-size: 12px; }
  .ranking-name { font-size: 15px; min-height: 44px; overflow-wrap: anywhere; }
  .ranking-status { font-size: 11px; }
  #ranking-table thead th { font-size: 11px; line-height: 1.4; }
  .ranking-source { font-size: 12px; line-height: 1.6; flex-wrap: wrap; }
  .ranking-table-wrapper { max-width: 100%; overflow-x: auto; }
  .rumor-matchup { gap: 10px; }
  .rumor-fighter { min-height: 44px; overflow-wrap: anywhere; }
  .rumor-card, .rumor-byline, .rumor-group-sources { overflow-wrap: anywhere; }
  .rumor-actions > * { min-height: 44px; display: inline-flex; align-items: center; }
  footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  #toast { max-width: calc(100vw - 32px); bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .fighter-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fighter-card { display: block; }
  .fighter-card > .fighter-portrait { height: 250px; min-height: 0; }
  .fighter-card .fighter-photo { width: 100%; max-width: 100%; height: 100%; left: 0; transform: none; object-fit: contain; object-position: center bottom; }
  .fighter-card .portrait-label { left: 8px; right: 8px; bottom: 10px; font-size: 9px; letter-spacing: 0; line-height: 1.5; }
  .fighter-card .portrait-number { left: 10px; }
  .fighter-card > .favorite-button { left: auto; top: 12px; right: 12px; }
  .fighter-card-body { padding: 16px 18px 0; }
  .fighter-name { margin-top: 12px; font-size: 22px; }
  .fighter-name strong { font-size: 30px; line-height: 1.05; }
  .fighter-card-footer { margin-top: 12px; padding: 8px 0; }
  .view[data-view="luchadores"] .filters { grid-template-columns: minmax(0, 1fr); }
  .official-facts dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rumor-review-names { grid-template-columns: minmax(0, 1fr); }
}

/* Second mobile pass: readable feeds and full-screen detail sheets. */
@media (max-width: 700px) {
  .rumor-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .rumor-toolbar .search-box, #rumor-source { grid-column: 1 / -1; }
  .rumor-toolbar select { width: 100%; min-width: 0; }
  .rumor-matchup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }
  .rumor-matchup .rumor-fighter { font-size: clamp(21px, 5.8vw, 30px); line-height: 1.15; }
  .rumor-matchup .rumor-fighter:last-child { text-align: right; }
  .rumor-summary { font-size: 15px; line-height: 1.75; }
  .rumor-actions { gap: 8px 16px; }
  .rumor-group-sources a { display: inline-flex; align-items: center; min-height: 44px; }
  .rumor-group-sources small { font-size: 12px; line-height: 1.6; }
  .following-stats span, .followed-ranking, .followed-fighter-heading p {
    font-size: 12px;
    line-height: 1.6;
  }
  .following-stats article { min-width: 0; overflow-wrap: anywhere; }
  .followed-fighter-name, .following-bout-actions > * {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .following-bout-actions { gap: 8px 16px; }
  .account-actions > button { flex: 1 1 140px; }
  .follow-picker > div { flex-wrap: wrap; }
  .follow-picker select { flex-basis: 220px; width: 100%; }
  .follow-picker .button { flex-grow: 1; }
  .auth-tabs > button { flex: 1; min-width: 0; }
  .auth-import-local { align-items: center; min-height: 44px; }
  .auth-import-local input { width: 20px; height: 20px; margin: 0; }
  dialog .dialog-close { z-index: 5; }
  .official-facts dd, .lab-fighter h2 { overflow-wrap: anywhere; }
  .lab-fighter-photo img { max-width: 100%; }
  .event-info .button, .event-info .outline-button { min-height: 48px; }
  .event-kind-buttons { width: 100%; }
  .event-kind-buttons > button { flex: 1; }
  .backup-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  .backup-buttons > button { flex: 1; }
}

@media (max-width: 480px) {
  /* Use the full viewport for long profiles and cards, including iPhone safe areas. */
  #fighter-dialog, #event-dialog {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: max(12px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }
  .event-dialog-title { font-size: clamp(30px, 9vw, 42px); line-height: 1.1; }
  .fighter-card-footer { flex-wrap: wrap; gap: 8px; }
  .lab-fighter-summaries { gap: 8px; }
  .lab-fighter h2 { font-size: 22px; line-height: 1.2; }
  .lab-table thead th:first-child { width: 40%; }
  .official-bout-names { gap: 8px; }
}

/* Compact catalogue; the complete information remains in the fighter dialog. */
.mobile-card-record { display: none; }
@media (max-width: 700px) {
  .view[data-view="luchadores"] .fighter-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .view[data-view="luchadores"] .fighter-card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
  }
  .view[data-view="luchadores"] .fighter-card > .fighter-portrait {
    height: 190px;
    min-height: 0;
    align-self: center;
    background: radial-gradient(ellipse at bottom, color-mix(in srgb, var(--fighter-color) 18%, var(--surface)), var(--surface));
  }
  .view[data-view="luchadores"] .fighter-card .fighter-photo {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    transform: none;
    object-fit: contain;
    object-position: center bottom;
  }
  .view[data-view="luchadores"] .portrait-grid,
  .view[data-view="luchadores"] .portrait-initials,
  .view[data-view="luchadores"] .portrait-number,
  .view[data-view="luchadores"] .portrait-label,
  .view[data-view="luchadores"] .fighter-card-meta,
  .view[data-view="luchadores"] .fighter-card-body > .championship-badge,
  .view[data-view="luchadores"] .card-combat-info,
  .view[data-view="luchadores"] .fighter-card-footer,
  .view[data-view="luchadores"] .fighter-card-body > p:not(.fighter-division):not(.mobile-card-record) {
    display: none;
  }
  .view[data-view="luchadores"] .fighter-card-body { padding: 18px 16px; }
  .view[data-view="luchadores"] .fighter-name {
    min-height: 44px;
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.2;
    width: 100%;
  }
  .view[data-view="luchadores"] .fighter-name strong {
    font-size: clamp(22px, 5.5vw, 28px);
    line-height: 1.1;
    margin-top: 3px;
  }
  .view[data-view="luchadores"] .fighter-division {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
  }
  .view[data-view="luchadores"] .mobile-card-record {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 14px 0 0;
  }
  .mobile-card-record span { font-size: 10px; letter-spacing: .5px; color: var(--muted); }
  .mobile-card-record strong { font-size: 19px; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
  .view[data-view="luchadores"] .fighter-card > .favorite-button {
    top: 8px;
    left: 8px;
    right: auto;
    border-radius: 50%;
    background: #101010bf;
  }
}

/* Mobile motion stays brief and uses only opacity and transforms. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .view:not([hidden]) { animation: mobile-view-enter 240ms ease-out; }

  .view:not([hidden]) :is(.fighter-grid, .rumor-list, .following-fighter-grid) > :is(.fighter-card, .rumor-card, .followed-fighter) {
    animation: mobile-card-enter 340ms cubic-bezier(.2,.7,.3,1) backwards;
  }
  .view:not([hidden]) :is(.fighter-grid, .rumor-list, .following-fighter-grid) > :nth-child(2) { animation-delay: 45ms; }
  .view:not([hidden]) :is(.fighter-grid, .rumor-list, .following-fighter-grid) > :nth-child(3) { animation-delay: 90ms; }
  .view:not([hidden]) :is(.fighter-grid, .rumor-list, .following-fighter-grid) > :nth-child(4) { animation-delay: 135ms; }

  #fighter-dialog[open], #event-dialog[open], #auth-dialog[open] {
    animation: mobile-sheet-enter 280ms cubic-bezier(.2,.8,.25,1);
  }
  .header.mobile-menu-open nav,
  .header.mobile-menu-open .header-actions,
  #fighter-filters.mobile-filters-open {
    animation: mobile-panel-enter 180ms ease-out;
  }
  .button, .outline-button, .icon-button, .favorite-button,
  .fighter-name, .segmented button {
    transition: transform 120ms ease-out, background-color 160ms ease-out, color 160ms ease-out;
  }
  :is(.button, .outline-button, .icon-button, .favorite-button, .fighter-name, .segmented button):not(:disabled):active {
    transform: scale(.97);
  }
}

@keyframes mobile-view-enter {
  from { opacity: .5; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mobile-card-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mobile-sheet-enter {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mobile-panel-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mobile-follow-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.12); }
}

/* Celebrate a new follow only after the user's action, never on a feed refresh. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  [data-favorite].follow-celebrate {
    animation: mobile-follow-heartbeat 520ms cubic-bezier(.2,.8,.3,1);
    isolation: isolate;
    overflow: visible;
  }
  [data-favorite].follow-celebrate:not(.favorite-button) { position: relative; }
  [data-favorite].follow-celebrate::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid var(--accent);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: mobile-follow-ring 520ms ease-out;
  }
}
@keyframes mobile-follow-heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.14); }
  50% { transform: scale(.96); }
  72% { transform: scale(1.06); }
}
@keyframes mobile-follow-ring {
  0% { opacity: .85; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.35); }
}