/* 20260715-mobile18 ---------------------------------------------------------
   Final responsive compatibility layer. Desktop geometry stays unchanged;
   phone and tablet views reuse the same black liquid-glass design language. */

@media (max-width: 930px) {
  :root { --mobile-gutter: clamp(12px, 4vw, 24px); }
  html { scroll-padding-top: 12px; }
  body { min-width: 0 !important; overflow-x: clip; }
  .wrap { width: 100%; padding-left: var(--mobile-gutter) !important; padding-right: var(--mobile-gutter) !important; }

  /* Header: keep every account action available without masking overflow. */
  .topbar {
    height: auto !important;
    min-height: 70px;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-bottom: 10px !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px !important;
  }
  .topbar .brand {
    max-width: calc(100% - 8px);
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar nav {
    display: flex !important;
    margin-left: auto !important;
    gap: 6px !important;
  }
  .topbar nav .nav-item {
    min-height: 44px !important;
    padding-inline: 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  .top-actions {
    width: 100%;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 100px 52px minmax(62px, 1fr) minmax(62px, 1fr) 50px;
    gap: 7px !important;
    align-items: stretch;
  }
  .top-actions > * { min-width: 0 !important; width: 100% !important; height: 44px !important; min-height: 44px !important; padding-inline: 8px !important; }
  body .top-actions > [data-theme] { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
  .top-actions .circle-button { max-width: 100px; }
  .top-actions .language-button,
  .top-actions .account-button,
  .top-actions .preference-button { display: inline-flex !important; align-items: center; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions .primary.small { max-width: 52px; }
  .top-actions .primary.small b { display: none !important; }

  .launcher-head { align-items: stretch !important; gap: 12px !important; }
  .launcher-stats { flex: 0 0 auto; }
  .game-launcher { padding-top: 18px !important; }
  .game-launcher-grid { min-width: 0; }

  /* Lobby filters retain the desktop ordering, but use a touch-sized grid. */
  .filters.lobby-filter-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
  }
  .lobby-filter-row > .search { grid-column: 1 / -1 !important; }
  .lobby-filter-row > .advanced-filters { grid-column: 1 / -1 !important; }
  .lobby-filter-row :is(.picker-trigger, select, input, summary) { min-height: 46px !important; }
  .advanced-content { width: min(100%, calc(100vw - 2 * var(--mobile-gutter) - 20px)) !important; }

  /* Shared touch affordances. */
  :is(button, a.oauth-button, .picker-trigger, .rank-filter-dropdown > summary, .modal-close) { min-height: 44px; }
  dialog.modal[open] > .modal-close,
  dialog.modal[open] > .wizard-close,
  .modal-close,
  .wizard-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    z-index: 1200 !important;
    transform: none !important;
    scale: 1 !important;
  }

  /* All secondary pages stay inside the visual viewport and safe areas. */
  dialog.modal[open] {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: auto !important;
    border-radius: 22px !important;
    overscroll-behavior: contain;
  }
  dialog.modal[open]::backdrop { overscroll-behavior: none; }

  /* Auth: preserve the desktop glass card while fixing the eye control. */
  .auth-modal[open] { overflow: hidden !important; }
  .auth-stage { height: 100%; min-height: 0; }
  .auth-panel { min-height: 0; overflow-y: auto; padding: 58px 22px max(24px, env(safe-area-inset-bottom)) !important; }
  .oauth-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .oauth-button { min-width: 0; padding-inline: 12px !important; }
  .oauth-button b { white-space: normal; line-height: 1.25; text-align: center; }
  .auth-password-wrap { position: relative !important; display: block !important; }
  .auth-password-wrap > input { width: 100% !important; padding-right: 56px !important; }
  .auth-password-wrap > .auth-password-toggle,
  .auth-password-wrap .auth-password-toggle.liquid-control {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    bottom: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    transform: translateY(-50%) !important;
    scale: 1 !important;
    margin: 0 !important;
    z-index: 8 !important;
  }

  /* Preferences: scroll content above a stable navigation bar. */
  .wizard-simple[open] {
    height: calc(100dvh - 16px) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }
  .wizard-simple > * { min-width: 0 !important; max-width: 100% !important; }
  .wizard-simple > .wizard-top {
    width: 100% !important;
    min-height: 74px;
    padding-right: 62px !important;
    overflow: hidden;
  }
  .wizard-simple > .wizard-simple-page {
    width: auto !important;
    justify-self: stretch;
    margin-inline: 16px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    padding-bottom: 104px !important;
    scrollbar-gutter: stable;
  }
  .wizard-simple > .wizard-nav {
    position: relative !important;
    left: auto; right: auto; bottom: auto;
    grid-row: 3 !important;
    min-height: 72px;
    z-index: 900 !important;
    padding: 10px max(18px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, transparent, rgba(3, 5, 9, .92) 28%) !important;
    backdrop-filter: blur(10px) saturate(112%);
    -webkit-backdrop-filter: blur(10px) saturate(112%);
  }
  .wizard-simple .simple-country-block .custom-picker > .picker-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(42dvh, 330px) !important;
    transform-origin: center bottom !important;
    z-index: 1150 !important;
  }
  .wizard-inline-confirm { margin-bottom: 72px !important; }
  .wizard-simple-page :is(h2, p, .simple-block, .wizard-choices) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  /* Publish: one screen, scroll only inside its content; menus become sheets. */
  .publish-modal[open] { height: calc(100dvh - 16px) !important; overflow: hidden !important; }
  .publish-layout { height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
  .publish-layout > form { height: 100% !important; min-height: 0 !important; padding: 54px 16px max(12px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; }
  .publish-form-grid { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: 16px; }
  .publish-step-page { min-height: 0 !important; align-content: start; }
  .publish-wizard-nav, .publish-submit { flex: 0 0 auto; position: relative !important; bottom: auto !important; z-index: 700 !important; }
  dialog#publish-modal[open] .publish-step-page .custom-picker.open > .picker-menu,
  dialog#publish-modal[open] .custom-picker[data-for="form-needed"].open > .picker-menu,
  .publish-modal .custom-picker.open > .picker-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(44dvh, 340px) !important;
    overflow: auto !important;
    transform-origin: center bottom !important;
    z-index: 1150 !important;
  }

  /* Personal recruitment tabs remain fully legible at phone widths. */
  .my-recruitments-modal[open] { padding: 58px 14px max(16px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; }
  .my-recruitments-scroll { height: 100%; min-height: 0; overflow-y: auto; padding: 0 2px 24px !important; }
  .my-recruitment-tabs {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 4px !important;
    overflow: visible !important;
  }
  .my-recruitment-tabs > button { min-width: 0 !important; min-height: 52px !important; padding: 5px 7px !important; gap: 4px !important; }
  .my-tab-label { min-width: 0; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; line-height: 1.15 !important; font-size: 12px !important; }
  .my-tab-count { flex: 0 0 auto; min-width: 22px !important; }
  .my-recruitments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Admin follows the same mobile glass shell. */
  .admin-header { height: auto !important; min-height: 72px; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 10px; gap: 10px; flex-wrap: wrap; }
  .admin-header .brand { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
  .admin-header-actions { margin-left: auto; min-width: 0; }
  body .admin-header-actions > [data-admin-theme] { height: 44px !important; min-height: 44px !important; }
  .admin-main { padding-top: 18px !important; padding-bottom: max(24px, env(safe-area-inset-bottom)) !important; }
  .admin-heading { padding: 20px !important; align-items: flex-start !important; }
  .admin-heading h1 { font-size: clamp(34px, 10vw, 52px) !important; }
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-tabs, .admin-subtabs {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .admin-tabs::-webkit-scrollbar, .admin-subtabs::-webkit-scrollbar { display: none; }
  .admin-tabs > button, .admin-subtabs > button { flex: 0 0 auto; min-width: 104px; min-height: 46px; }
  .admin-panel { max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 840px; }
  .admin-action-modal[open] { padding: 58px 18px 22px !important; overflow-y: auto !important; }

  .recruit-card, .launcher-game, .my-recruitment-entry { content-visibility: auto; contain-intrinsic-size: 280px; }
}

@media (max-width: 620px) {
  .launcher-head { flex-direction: column !important; }
  .launcher-title { font-size: clamp(30px, 9vw, 38px) !important; }
  .launcher-stats { width: 100%; display: grid !important; grid-template-columns: repeat(3, 1fr); }
  .launcher-stats > div { min-width: 0; padding: 9px 8px !important; }
  .launcher-stats span { font-size: 9px !important; line-height: 1.25; }

  .launcher-popular-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, 58px) !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(154px, 72vw);
    gap: 8px !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 5px;
  }
  .launcher-popular-grid .launcher-game { scroll-snap-align: start; min-width: 0; }
  .launcher-search-results { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .section-title { gap: 14px !important; }
  .board-actions { width: 100%; display: grid !important; grid-template-columns: 1fr 1.2fr; }
  .board-actions > * { width: 100%; min-width: 0; min-height: 48px; }
  .filters.lobby-filter-row { margin-top: 20px !important; }
  .board-meta { gap: 12px; align-items: flex-start; }
  .sync-status { text-align: right; }
  .recruitment-grid { grid-template-columns: 1fr !important; }

  .oauth-actions { grid-template-columns: 1fr !important; }
  .oauth-button { min-height: 58px !important; }
  .auth-panel h2 { font-size: clamp(34px, 11vw, 46px) !important; }
  .auth-form-options { align-items: center !important; gap: 8px; }

  .wizard-simple > .wizard-top { padding: 18px 56px 6px 16px !important; }
  .wizard-simple > .wizard-simple-page { margin-inline: 10px !important; padding: 10px 10px 104px !important; }
  .wizard-simple-page h2 { font-size: clamp(30px, 9vw, 38px) !important; }
  .wizard-choices.language-choices,
  .wizard-choices.continent-choices { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .simple-game-choices { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .simple-game-choices button { min-width: 0; min-height: 62px; }
  .simple-game-choices button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .publish-step-page { grid-template-columns: 1fr !important; gap: 10px !important; }
  .publish-step-page > * { grid-column: 1 !important; }
  .publish-step-page > label { padding: 10px !important; }
  .publish-wizard-nav { gap: 8px !important; margin-top: 10px !important; }
  .publish-wizard-nav button { flex: 1; min-width: 0 !important; }

  .my-recruitments-grid { grid-template-columns: 1fr !important; margin-top: 14px !important; }
  .my-recruitments-modal h2 { font-size: clamp(32px, 10vw, 44px) !important; }

  .footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .footer :is(.brand,.link-button) { min-height: 44px !important; display: inline-flex; align-items: center; }
  #toast, #admin-toast, #context-hint { top: max(10px, env(safe-area-inset-top)) !important; max-width: calc(100vw - 20px) !important; }
}

@media (max-width: 420px) {
  .topbar nav .nav-item { padding-inline: 8px !important; }
  .top-actions { grid-template-columns: 100px 46px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 5px !important; }
  body .top-actions > [data-theme] { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
  .top-actions > * { font-size: 11px !important; padding-inline: 5px !important; }
  .top-actions .primary.small { max-width: 48px; }
  .filters.lobby-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .filters.lobby-filter-row > label > span, .filters.lobby-filter-row > .advanced-filters > summary { font-size: 10px !important; }
  .simple-game-choices { grid-template-columns: 1fr !important; }
  .simple-game-choices button { min-height: 58px; }
  .my-recruitment-tabs > button { padding-inline: 4px !important; }
  .my-tab-label { font-size: 11px !important; }
  .my-tab-count { min-width: 20px !important; padding-inline: 4px !important; }
}

@media (max-width: 350px) {
  .topbar nav { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
  .top-actions { grid-template-columns: 100px 40px minmax(0, 1fr) minmax(0, 1fr) 42px; gap: 4px !important; }
  body .top-actions > [data-theme] { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
  .filters.lobby-filter-row { grid-template-columns: 1fr !important; }
  .lobby-filter-row > * { grid-column: 1 !important; }
  .admin-stat-grid { grid-template-columns: 1fr !important; }
}

@media (hover: none), (pointer: coarse) {
  .webgl-control, .launcher-game, button { -webkit-tap-highlight-color: transparent; }
  .webgl-control:hover, .launcher-game:hover, .recruit-card:hover { transform: none !important; }
  .border-glow-field { --edge-opacity: .28 !important; }
  .liquid-control > .liquid-control-warp { filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .launcher-popular-grid { scroll-snap-type: none; }
}