/* Final responsive pass loaded after page-level styles. */

@media (max-width: 1120px) {
  .footer.cut-footer {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .footer.cut-footer .footer-inner,
  .footer.cut-footer .footer-bottom {
    width: min(100%, 1540px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .page-shell,
  .site-main,
  .content-shell,
  .content-section,
  .contributors-hero,
  .contributors-board,
  .profile-content,
  .profile-pane,
  .settings-panels,
  .admin-workspace,
  .card-grid-wrap,
  .rail-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .contributors-hero,
  .contributors-board {
    width: 100% !important;
  }


  .contributors-hero > *,
  .contributors-board > *,
  .contributors-summary,
  .contributors-summary > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .contributors-hero h1,
  .contributors-board-head h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 10vw, 38px) !important;
    overflow-wrap: anywhere;
  }
  .site-main {
    margin-left: 0 !important;
  }

  .content-shell {
    width: 100% !important;
    padding: 16px clamp(12px, 4vw, 18px) 0 !important;
  }

  .topbar {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  .topbar-left {
    gap: 0 !important;
    min-width: 0 !important;
  }

  .topbar .brand {
    display: none !important;
  }

  .topbar .search-form {
    position: static !important;
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    transform: none !important;
  }

  .search-form .ui-icon {
    left: 12px !important;
    width: 17px;
    height: 17px;
  }

  .search-form input {
    min-width: 0;
    padding-right: 10px !important;
    padding-left: 38px !important;
    font-size: 14px;
  }

  .topbar-actions {
    gap: 6px !important;
  }

  .auth-header-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    overflow: hidden;
  }

  .auth-header-button em,
  .auth-header-button span:not(.notification-count) {
    display: none !important;
  }

  .auth-header-button .ui-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
  }

  .sidebar {
    width: min(84vw, 280px) !important;
    padding: 24px 40px 24px 22px !important;
    overflow-y: auto;
  }

  .nav-link {
    max-width: 100% !important;
    font-size: 11px !important;
  }

  .hero-grid,
  .hero-list,
  .category-row,
  .legal-layout,
  .settings-grid,
  .settings-workspace,
  .settings-workspace[data-settings-tabs],
  .owner-admin-status,
  .admin-cockpit,
  .admin-module-grid,
  .create-hero,
  .discover-detail-layout,
  .friends-layout,
  .contributors-hero,
  .updates-hero,
  .notifications-hero,
  .premium-wide-banner,
  .single-judge-panel {
    grid-template-columns: 1fr !important;
  }

  .hero-panel,
  .hero-copy {
    min-height: auto !important;
  }

  .hero-copy,
  .discover-hero-copy,
  .legal-hero,
  .settings-hero,
  .premium-hero,
  .premium-card,
  .contributors-hero,
  .updates-hero,
  .notifications-hero {
    padding: clamp(20px, 6vw, 30px) !important;
  }

  .hero-copy h1,
  .discover-hero h1,
  .legal-hero h1,
  .settings-hero h1,
  .premium-hero h1,
  .updates-hero h1,
  .notifications-hero h1,
  .owner-admin-status h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 0.96 !important;
    overflow-wrap: anywhere;
  }

  .discover-hero,
  .settings-hero,
  .legal-hero {
    width: 100% !important;
    min-height: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .discover-hero {
    min-height: 360px !important;
  }

  .analytics-band {
    grid-auto-columns: minmax(210px, 78vw) !important;
    padding-inline: clamp(14px, 4vw, 18px) !important;
  }

  .section-head,
  .create-section-head,
  .contributors-board-head,
  .updates-editor-head,
  .settings-panel-head,
  .settings-category-head,
  .admin-section-head,
  .discussion-header,
  .list-version-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start;
    gap: 10px !important;
  }

  .filter-row,
  .history-filter-row,
  .finish-later-filter-row,
  .notification-filters,
  .settings-side-nav,
  .admin-rail-nav,
  .admin-filters,
  .updates-summary,
  .notifications-summary,
  .premium-banner-stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    width: 100%;
    gap: 10px !important;
  }

  .filter-dropdown,
  .history-dropdown,
  .finish-later-dropdown,
  .filter-trigger,
  .filter-option,
  .view-switch,
  .notification-filters button,
  .settings-tab-button,
  .admin-rail-nav a,
  .admin-filters input,
  .admin-filters select,
  .admin-filters button {
    width: 100% !important;
  }

  .view-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .view-switch button {
    justify-content: center;
  }

  .wide-banner,
  .premium-wide-banner {
    min-height: 190px !important;
    padding: 22px !important;
  }

  .wide-banner h2,
  .premium-wide-banner h2 {
    max-width: 100%;
    font-size: clamp(30px, 10vw, 40px) !important;
  }

  .legal-index {
    position: static !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto;
    padding: 10px !important;
    scrollbar-width: none;
  }

  .legal-index::-webkit-scrollbar {
    display: none;
  }

  .legal-index a {
    flex: 0 0 auto;
  }

  .create-panel {
    min-height: auto !important;
    padding: 48px 18px !important;
  }

  .create-title {
    max-width: 100% !important;
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  .prompt-bar {
    grid-template-columns: 34px minmax(0, 1fr) 38px !important;
    min-height: 52px !important;
  }

  .create-actions,
  .discover-actions,
  .profile-actions,
  .game-results-actions,
  .updates-editor-actions,
  .discussion-composer-actions,
  .admin-actions,
  .premium-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    gap: 10px !important;
  }

  .create-action,
  .discover-primary-action,
  .profile-action,
  .game-results-actions a,
  .game-results-actions button,
  .updates-editor-actions button,
  .discussion-composer-actions button,
  .admin-actions button,
  .premium-hero-actions a,
  .premium-banner-link {
    width: 100% !important;
  }

  .list-hero {
    gap: 18px !important;
    padding: 18px !important;
  }

  .list-hero h1 {
    max-width: 100% !important;
    font-size: clamp(38px, 12vw, 52px) !important;
  }

  .list-cover {
    min-height: clamp(220px, 64vw, 340px) !important;
  }

  .list-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  .list-actions::before {
    display: none !important;
  }

  .list-actions .list-action,
  .list-actions .mode-picker,
  .list-actions .mode-select {
    width: 100% !important;
  }

  .list-actions .list-action[href*="game.html"] {
    grid-column: 1 / -1;
  }

  .list-tabs,
  .profile-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  .list-tab,
  .profile-tab {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  .profile-hero {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 14px 20px !important;
    grid-template-columns: 1fr !important;
  }

  .profile-hero::before,
  .profile-hero-media {
    height: 132px !important;
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px) !important;
  }

  .profile-avatar {
    --profile-avatar-size: 104px;
    --profile-avatar-half: 52px;
    left: 18px !important;
    top: 80px !important;
    width: 104px !important;
  }

  .profile-hero > .profile-identity,
  .profile-hero > .profile-avatar + div {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-top: 154px !important;
  }

  .profile-name {
    font-size: clamp(32px, 12vw, 44px) !important;
  }

  .profile-mini-stats span {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }

  .profile-section-head,
  .side-title {
    align-items: flex-start !important;
  }

  .profile-pane[data-profile-pane="overview"] .profile-card-row,
  .profile-pane[data-profile-pane="overview"] .profile-card-row.one-card,
  .profile-pane:not([data-profile-pane="overview"]) .profile-card-row,
  .profile-pane:not([data-profile-pane="overview"]) .profile-card-row.one-card {
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  .stats-grid,
  .friend-metrics,
  .quest-grid,
  .settings-profile-card .settings-profile-layout,
  .settings-profile-card .settings-profile-fields,
  .settings-field-grid,
  .settings-toggle-list,
  .settings-actions-grid,
  .admin-metrics,
  .admin-overview .admin-metrics,
  .admin-activity-grid,
  .admin-split,
  .updates-editor form,
  .update-card,
  .notification-card,
  .contributor-card,
  .game-results-list article,
  .ranking-row {
    grid-template-columns: 1fr !important;
  }

  .admin-table-wrap {
    overflow-x: auto !important;
  }

  .admin-table {
    min-width: 720px !important;
  }

  .game-control-bar {
    height: auto !important;
    min-height: 0 !important;
    position: sticky;
    bottom: 0;
  }

  .game-context,
  .game-actions {
    align-items: stretch !important;
  }
}

@media (max-width: 640px) {
  .card-grid,
  .discover-grid,
  .creation-grid,
  .item-grid,
  .list-stats,
  .premium-grid,
  .contributors-grid,
  .notification-settings,
  .update-media-grid {
    grid-template-columns: 1fr !important;
  }

  .card-rail {
    grid-auto-columns: minmax(210px, 82vw) !important;
  }

  .hero-option,
  .list-stat,
  .friend-line,
  .rating-row,
  .list-version-row {
    grid-template-columns: 1fr !important;
  }

  .hero-option .option-thumb,
  .rating-row img {
    width: min(100%, 92px);
  }
}

@media (max-width: 460px) {
  .list-actions,
  .profile-tabs,
  .view-switch {
    grid-template-columns: 1fr !important;
  }

  .profile-mini-stats span {
    flex-basis: 100%;
  }

  .auth-panel,
  .auth-modal-panel,
  .profile-share-panel,
  .profile-edit-modal .profile-edit-panel {
    padding-inline: 16px !important;
  }
}

/* Mobile visual fixes found during screenshot QA. */
@media (max-width: 760px) {
  .profile-hero {
    display: block !important;
    padding-top: 1px !important;
  }

  .profile-avatar {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 78px 0 14px !important;
  }

  .profile-hero > .profile-identity,
  .profile-hero > .profile-avatar + div {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: grid !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 10px !important;
  }

  .profile-identity .profile-name {
    width: 100%;
  }

  .profile-identity .profile-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
  }

  .profile-mini-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .profile-mini-stats span {
    min-width: 0;
  }

  .game-control-bar {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .game-context,
  .game-actions {
    width: 100% !important;
    justify-self: stretch !important;
  }

  .game-actions button,
  .game-actions a,
  .game-mode-button {
    width: 100% !important;
  }
}

@media (max-width: 460px) {
  .profile-mini-stats {
    grid-template-columns: 1fr !important;
  }
}

/* Current goal: denser mobile grids, no list/grid picker on phones. */
@media (max-width: 760px) {
  .view-switch {
    display: none !important;
  }

  .card-grid,
  .discover-grid,
  .discover-grid.is-list-view,
  .creation-grid,
  .item-grid,
  .profile-card-row,
  .profile-card-row.one-card,
  .profile-pane[data-profile-pane="overview"] .profile-card-row,
  .profile-pane[data-profile-pane="overview"] .profile-card-row.one-card,
  .profile-pane:not([data-profile-pane="overview"]) .profile-card-row,
  .profile-pane:not([data-profile-pane="overview"]) .profile-card-row.one-card,
  .quest-grid,
  .stats-grid,
  .friend-metrics,
  .list-stats,
  .premium-grid,
  .quest-board-grid,
  .quest-board-grid.is-list-view {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .discover-grid.is-list-view .discover-card,
  .quest-board-grid.is-list-view .quest-board-card {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .discover-grid.is-list-view .discover-card-media,
  .discover-card-media,
  .card-media,
  .mini-media,
  .creation-media,
  .item-card > img,
  .profile-card img {
    min-height: 0 !important;
    margin: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }

  .discover-grid.is-list-view .discover-card-body,
  .discover-card-body,
  .card-body,
  .creation-body,
  .item-body,
  .profile-card-body,
  .quest-card,
  .stat-tile,
  .list-stat,
  .premium-card {
    min-height: 0 !important;
    padding: 10px !important;
    gap: 7px !important;
  }

  .discover-card h2,
  .card-body h3,
  .mini-card h3,
  .creation-body h3,
  .item-body h2,
  .profile-card h3,
  .quest-card h3,
  .premium-card h2 {
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  .discover-card p,
  .card-body p,
  .mini-card p,
  .creation-category,
  .item-body p,
  .profile-card p,
  .quest-card p,
  .premium-card p,
  .list-description {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .discover-card p,
  .card-body p,
  .mini-card p,
  .item-body p,
  .profile-card p,
  .quest-card p,
  .premium-card p {
    max-height: 2.6em;
    overflow: hidden;
  }

  .discover-card-meta,
  .card-meta,
  .creation-stats,
  .profile-card-stats,
  .list-card-stats,
  .quest-foot {
    gap: 5px 7px !important;
    font-size: 9px !important;
  }

  .list-card-stat .ui-icon {
    width: 11px !important;
    height: 11px !important;
  }

  .list-finish-later-button {
    top: 7px !important;
    right: 7px !important;
    width: 30px !important;
    height: 30px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .item-card {
    grid-template-rows: auto 1fr !important;
  }

  .list-tab,
  .profile-tab,
  .filter-trigger,
  .filter-option {
    min-height: 38px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 420px) {
  .card-grid,
  .discover-grid,
  .discover-grid.is-list-view,
  .creation-grid,
  .item-grid,
  .profile-card-row,
  .profile-card-row.one-card,
  .profile-pane[data-profile-pane="overview"] .profile-card-row,
  .profile-pane[data-profile-pane="overview"] .profile-card-row.one-card,
  .profile-pane:not([data-profile-pane="overview"]) .profile-card-row,
  .profile-pane:not([data-profile-pane="overview"]) .profile-card-row.one-card,
  .quest-grid,
  .stats-grid,
  .friend-metrics,
  .list-stats,
  .premium-grid,
  .quest-board-grid,
  .quest-board-grid.is-list-view {
    gap: 8px !important;
  }

  .discover-card-body,
  .card-body,
  .creation-body,
  .item-body,
  .profile-card-body,
  .quest-card,
  .stat-tile,
  .list-stat,
  .premium-card {
    padding: 8px !important;
  }
}

/* Current goal: compact contributor rows on mobile. */
@media (max-width: 760px) {
  .contributors-shell {
    gap: 16px !important;
  }

  .contributors-hero {
    min-height: 0 !important;
    padding: 16px !important;
    gap: 12px !important;
  }

  .contributors-hero h1 {
    margin-top: 8px !important;
    font-size: clamp(28px, 9vw, 36px) !important;
  }

  .contributors-intro,
  .contributors-board-head p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .contributors-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .contributors-summary span {
    padding: 9px !important;
    font-size: 9px !important;
  }

  .contributors-summary strong {
    font-size: 16px !important;
  }

  .contributors-board {
    padding: 12px !important;
  }

  .contributors-board-head h2 {
    font-size: 22px !important;
  }

  .contributors-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .contributor-card {
    grid-template-columns: 36px 42px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  .contributor-rank {
    min-height: 32px !important;
    font-size: 12px !important;
  }

  .contributors-avatar {
    width: 42px !important;
    font-size: 16px !important;
  }

  .contributor-main {
    min-width: 0;
  }

  .contributor-main h3 {
    overflow: hidden;
    font-size: 13px !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .contributor-main p,
  .contributor-main span {
    overflow: hidden;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .contributor-score {
    justify-self: end;
    padding: 6px 8px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }

  .contributor-stats {
    grid-column: 2 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px !important;
    width: 100%;
  }

  .contributor-stats span {
    min-width: 0;
    padding: 5px 4px !important;
    overflow: hidden;
    font-size: 9px !important;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .contributor-card {
    grid-template-columns: 32px 38px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .contributors-avatar {
    width: 38px !important;
  }

  .contributor-score {
    grid-column: 2 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .contributor-stats {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Current goal: tighter mobile toolbars, profile header, footer and rails. */
@media (max-width: 760px) {
  .discover-shell .view-switch,
  .history-shell .view-switch,
  .finish-later-shell .view-switch,
  .quest-shell .view-switch {
    display: none !important;
  }

  .filter-row,
  .history-filter-row,
  .finish-later-filter-row,
  .quest-filter-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    align-items: start !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .filter-dropdown,
  .history-dropdown,
  .finish-later-dropdown,
  .quest-dropdown {
    min-width: 0 !important;
    width: 100% !important;
  }

  .filter-trigger,
  .history-dropdown .filter-trigger,
  .finish-later-dropdown .filter-trigger,
  .quest-filter-row .filter-trigger {
    min-height: 38px !important;
    grid-template-columns: 18px minmax(0, 1fr) 16px !important;
    gap: 7px !important;
    padding: 0 9px !important;
    font-size: 9px !important;
  }

  .discover-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 22px !important;
  }

  .discover-primary-action {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
  }

  .discover-icon-action {
    flex: 0 0 42px;
    width: 42px !important;
    height: 42px !important;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 14px !important;
  }

  .footer-links section {
    min-width: 0;
  }

  .footer-links h3 {
    font-size: 10px !important;
  }

  .footer-links a {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .contributors-summary {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .contributors-summary span {
    flex: 1 1 0;
    min-width: 0 !important;
  }

  .profile-avatar {
    margin: 78px auto 12px !important;
  }

  .profile-identity {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px 10px !important;
  }

  .profile-name,
  .profile-bio,
  .profile-mini-stats {
    grid-column: 1 / -1 !important;
  }

  .profile-identity .profile-actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: auto !important;
    margin: 0 !important;
    gap: 6px !important;
  }

  .profile-action {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
  }

  .profile-action .ui-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .profile-meta {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .profile-meta span:first-child:nth-last-child(3),
  .profile-meta span:last-child:nth-child(3) {
    display: none !important;
  }

  .profile-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 10px 0 !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .profile-tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  .card-grid[data-grid-rail],
  .card-rail,
  .analytics-band {
    overflow-x: auto !important;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .analytics-band,
  .metrics-grid-wrap .analytics-band,
  .analytics-band.cut-corners {
    grid-auto-columns: calc((100% - 10px) / 2) !important;
    gap: 10px !important;
    padding: 14px 14px !important;
  }

  .metric-card {
    min-height: 118px !important;
    padding: 10px !important;
  }

  .metric-card p {
    font-size: 10px !important;
  }

  .metric-card strong {
    font-size: 22px !important;
  }
}

@media (max-width: 420px) {
  .filter-row,
  .history-filter-row,
  .finish-later-filter-row,
  .quest-filter-row {
    gap: 7px !important;
  }

  .analytics-band,
  .metrics-grid-wrap .analytics-band,
  .analytics-band.cut-corners {
    grid-auto-columns: calc((100% - 8px) / 2) !important;
    gap: 8px !important;
    padding-inline: 12px !important;
  }
}

/* Current goal: final mobile profile header alignment. */
@media (max-width: 720px) {
  .profile-hero {
    --profile-avatar-size: 112px !important;
    --profile-avatar-half: 56px !important;
    --profile-avatar-left: 50% !important;
    min-height: 510px !important;
  }

  .profile-avatar,
  .profile-avatar.has-image {
    left: 50% !important;
    top: calc(var(--profile-banner-height) - var(--profile-avatar-half)) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  .profile-hero > .profile-identity,
  .profile-hero > .profile-avatar + div {
    left: 16px !important;
    right: 16px !important;
    top: calc(var(--profile-banner-height) + 74px) !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 10px !important;
  }

  .profile-identity .profile-name,
  .profile-identity .profile-meta,
  .profile-identity .profile-bio,
  .profile-identity .profile-mini-stats,
  .profile-identity .profile-badge-row,
  .profile-identity .profile-actions {
    width: 100% !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .profile-identity .profile-actions {
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .profile-actions .profile-action,
  .profile-identity .profile-actions .profile-action {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
    overflow: hidden !important;
  }

  .profile-actions .profile-action span,
  .profile-identity .profile-actions .profile-action span {
    display: none !important;
  }

  .profile-actions .profile-action .ui-icon,
  .profile-identity .profile-actions .profile-action .ui-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }

  .profile-meta,
  .profile-mini-stats,
  .profile-badge-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .profile-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-left: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .profile-tab {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }
}

/* Current goal: list and game mobile layout cleanup. */
@media (max-width: 760px) {
  .list-shell {
    gap: 16px !important;
  }

  .list-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 14px !important;
  }

  .list-cover {
    order: -1;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    align-self: stretch !important;
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px) !important;
  }

  .list-cover img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .list-hero-copy {
    min-height: 0 !important;
    justify-content: flex-start !important;
  }

  .list-bars {
    margin-bottom: 10px !important;
  }

  .list-bars span {
    width: 34px !important;
    height: 5px !important;
  }

  .list-hero h1 {
    max-width: 100% !important;
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 0.95 !important;
  }

  .list-description {
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .list-author {
    margin-top: 10px !important;
    font-size: 11px !important;
  }

  .list-actions {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding-bottom: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .list-actions::-webkit-scrollbar,
  .list-stats::-webkit-scrollbar {
    display: none;
  }

  .list-actions::before {
    display: none !important;
  }

  .list-actions .list-action,
  .list-actions .mode-picker,
  .list-actions .mode-select {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 38px !important;
    height: 38px !important;
    font-size: 10px !important;
  }

  .list-actions .list-action {
    padding: 0 10px !important;
  }

  .list-actions .list-action.icon-only {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
  }

  .list-actions .list-action[href*="game.html"] {
    min-width: 78px !important;
    grid-column: auto !important;
  }

  .list-actions .mode-select {
    min-width: 104px !important;
    padding: 0 10px !important;
  }

  .list-stats {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .list-stat {
    flex: 0 0 132px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 8px !important;
    --cut: 10px !important;
  }

  .list-stat .stat-mark {
    width: 30px !important;
    height: 30px !important;
  }

  .list-stat span {
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .list-stat strong {
    font-size: 16px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .list-stat div span:last-child {
    display: none !important;
  }

  html,
  body.game-page {
    min-height: 100% !important;
    overflow: auto !important;
  }

  body.game-page .game-screen {
    min-height: 100dvh !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  body.game-page .game-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 14px 12px 10px !important;
    overflow: visible !important;
  }

  body.game-page .duel-card,
  body.game-page .duel-card-left,
  body.game-page .duel-card-right {
    width: min(100%, 520px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    justify-self: center !important;
  }

  body.game-page .duel-card .game-item-title {
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  body.game-page .versus-badge {
    width: 52px !important;
    height: 44px !important;
    font-size: 22px !important;
  }

  body.game-page .game-control-bar {
    position: sticky !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  body.game-page .game-context {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
  }

  body.game-page .game-mode-button {
    width: 42px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  body.game-page .game-context h1 {
    min-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    font-size: clamp(16px, 4.8vw, 22px) !important;
    line-height: 1 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.game-page .game-progress-dot {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: auto !important;
    height: 6px !important;
    margin: 0 !important;
  }

  body.game-page .game-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 76px 38px 38px 38px !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: end !important;
    justify-self: end !important;
    width: auto !important;
  }

  body.game-page .game-actions button,
  body.game-page .game-actions a {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  body.game-page .game-actions .game-match-status {
    width: 76px !important;
    min-width: 76px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  body.game-page .game-match-status .ui-icon {
    display: none !important;
  }

  body.game-page .game-actions .ui-icon,
  body.game-page .game-mode-button .ui-icon {
    width: 17px !important;
    height: 17px !important;
  }

  body.game-page[data-game-mode="ranking"] .game-stage,
  body.game-page[data-game-mode="overrated-underrated"] .game-stage,
  body.game-page .game-stage:has(.game-results-panel) {
    align-content: start !important;
    padding: 12px !important;
    overflow: auto !important;
  }

  body.game-page .ranking-mode-panel,
  body.game-page .single-judge-panel,
  body.game-page .game-results-panel {
    width: 100% !important;
    padding: 14px !important;
  }

  body.game-page .ranking-mode-head h2,
  body.game-page .single-judge-panel h2,
  body.game-page .game-results-head h2 {
    font-size: clamp(24px, 9vw, 38px) !important;
    line-height: 0.95 !important;
    overflow-wrap: anywhere !important;
  }

  body.game-page .ranking-mode-head p,
  body.game-page .single-judge-panel p,
  body.game-page .game-results-head p {
    margin: 8px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  body.game-page .ranking-list {
    gap: 8px !important;
    margin: 12px 0 !important;
  }

  body.game-page .ranking-row {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 38px 38px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px !important;
  }

  body.game-page .ranking-row > span {
    grid-column: 1 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    text-align: center !important;
  }

  body.game-page .ranking-media {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  body.game-page .ranking-media .game-item-title {
    min-height: 28px !important;
    font-size: 10px !important;
  }

  body.game-page .ranking-media img {
    height: 58px !important;
  }

  body.game-page .ranking-row button {
    width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  body.game-page .ranking-row button[data-rank-up]::before {
    content: "?";
    font-size: 18px;
  }

  body.game-page .ranking-row button[data-rank-down]::before {
    content: "?";
    font-size: 18px;
  }

  body.game-page .ranking-recap {
    width: 100% !important;
    min-height: 42px !important;
  }

  body.game-page .single-judge-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-content: start !important;
  }

  body.game-page .single-judge-panel .game-image-frame img {
    aspect-ratio: 16 / 10 !important;
  }

  body.game-page .judge-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  body.game-page .judge-actions button {
    min-height: 42px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  body.game-page .game-results-list {
    max-height: 52dvh !important;
  }

  body.game-page .game-results-list article {
    display: grid !important;
    grid-template-columns: 30px 50px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px !important;
  }

  body.game-page .game-results-list img {
    width: 50px !important;
  }

  body.game-page .game-results-list small {
    grid-column: 3 !important;
  }

  body.game-page .game-results-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.game-page .game-results-actions button,
  body.game-page .game-results-actions a {
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 370px) {
  .list-stat {
    flex-basis: 124px !important;
  }

  body.game-page .game-actions {
    grid-template-columns: 64px 36px 36px 36px !important;
    gap: 5px !important;
  }

  body.game-page .game-actions .game-match-status {
    width: 64px !important;
    min-width: 64px !important;
    font-size: 8px !important;
  }

  body.game-page .game-actions button,
  body.game-page .game-actions a {
    width: 36px !important;
    min-width: 36px !important;
  }
}

/* Current goal: mobile viewport width guard. */
@media (max-width: 760px) {
  .content-shell,
  .list-shell,
  .list-hero,
  .list-actions,
  .list-stats,
  body.game-page .game-screen,
  body.game-page .game-stage,
  body.game-page .game-control-bar {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .content-shell {
    width: 100% !important;
  }

  .list-actions,
  .list-stats {
    inline-size: 100% !important;
  }
}

/* Current goal: list grid min-width clamp. */
@media (max-width: 760px) {
  .list-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .list-hero,
  .list-cover,
  .list-actions,
  .list-stats {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Current goal: mobile duel column reset. */
@media (max-width: 760px) {
  body.game-page .duel-card-left,
  body.game-page .duel-card-right {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Current goal: mobile full-screen search and AI flow. */
@media (max-width: 760px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  body.mobile-search-open,
  body.ai-flow-open {
    overflow: hidden !important;
  }

  .topbar .search-form {
    justify-self: end !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    cursor: pointer;
  }

  .topbar .search-form .ui-icon {
    left: 50% !important;
    width: 19px !important;
    height: 19px !important;
    transform: translateX(-50%) !important;
  }

  .topbar .search-form input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding: 0 !important;
  }

  .mobile-search-overlay[hidden] {
    display: none !important;
  }

  .mobile-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    width: 100vw;
    height: 100dvh;
    box-sizing: border-box;
    background: #f5f6f7;
    color: var(--ink);
    padding: calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 14px);
  }

  .mobile-search-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 10px;
    align-items: center;
  }

  .mobile-search-field {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    min-height: 46px;
    border: 1px solid var(--line-soft);
    background: #fff;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  }

  .mobile-search-field .ui-icon {
    justify-self: center;
    width: 19px;
    height: 19px;
    color: var(--red);
  }

  .mobile-search-field input {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    padding: 0 12px 0 0;
    font-weight: 850;
  }

  .mobile-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line-soft);
    background: var(--red);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 950;
    text-transform: uppercase;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  }

  .mobile-search-results {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 8px;
    padding-bottom: 20px;
  }

  .mobile-search-results .search-suggestion,
  .mobile-search-results .search-suggestion-empty {
    min-height: 58px;
    border: 1px solid var(--line-soft);
    background: #fff;
    padding: 12px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }

  .mobile-search-results .search-suggestion {
    grid-template-columns: minmax(0, 1fr);
    font-size: 13px;
    font-weight: 950;
  }

  .mobile-search-results .search-suggestion-empty {
    display: grid;
    align-items: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .ai-flow-modal {
    place-items: stretch !important;
    padding: 0 !important;
    background: #f3f5f7 !important;
  }

  .ai-flow-backdrop {
    display: none !important;
  }

  .ai-flow-panel {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    border: 0 !important;
    background: #f3f5f7 !important;
    padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px) !important;
    box-shadow: none !important;
    clip-path: none !important;
  }

  .ai-flow-panel h2 {
    font-size: clamp(24px, 8vw, 34px) !important;
  }

  .ai-plan-grid {
    grid-template-columns: 1fr !important;
  }

  .ai-progress-shell {
    position: sticky;
    top: 0;
    z-index: 2;
    border: 1px solid var(--line-soft);
    background: #fff;
    padding: 12px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }

  .ai-flow-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: #f3f5f7;
    padding-top: 10px;
  }

  .ai-flow-actions .profile-action {
    width: 100% !important;
    min-height: 44px !important;
  }

  body.site-dark-mode .mobile-search-overlay,
  body.site-dark-mode .ai-flow-modal,
  body.site-dark-mode .ai-flow-panel,
  body.site-dark-mode .ai-flow-actions {
    background: #0f0f0f !important;
    color: var(--ink) !important;
  }

  body.site-dark-mode .mobile-search-field,
  body.site-dark-mode .mobile-search-results .search-suggestion,
  body.site-dark-mode .mobile-search-results .search-suggestion-empty,
  body.site-dark-mode .ai-progress-shell {
    border-color: var(--line-soft) !important;
    background: var(--panel-strong) !important;
    color: var(--ink) !important;
  }
}

/* Current pass: AI flow actions fit mobile without visible scrollbars. */
@media (max-width: 760px) {
  .ai-flow-modal {
    overflow: hidden !important;
  }

  .ai-flow-panel {
    display: grid !important;
    gap: 12px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    grid-template-rows: repeat(8, auto) minmax(0, 1fr) auto !important;
    padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px) !important;
  }

  .ai-flow-panel h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 0.96 !important;
  }

  .ai-mode-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 2px 0 0 !important;
  }

  .ai-mode-options label {
    min-height: 50px !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
  }

  .ai-plan-grid textarea {
    min-height: 72px !important;
  }

  .ai-flow-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: 0.82fr 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--line-soft) !important;
    background: transparent !important;
  }

  .ai-flow-actions .profile-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    box-shadow: 0 8px 18px rgba(15, 18, 23, 0.08) !important;
  }
}

/* Current pass: create mobile toolbar simplification. */
@media (max-width: 760px) {
  .create-shell .view-toggle {
    display: none !important;
  }

  .draft-select-menu {
    max-height: 42dvh !important;
    overflow-y: auto !important;
  }
}