/* CrateMarket Step 19 R4 production — zoom-safe responsive layout.
   Browser zoom and Android pinch zoom are intentionally allowed. */

:root {
  --cm-viewport-gap: clamp(8px, 2vw, 20px);
  --cm-visible-height: 100dvh;
}

html {
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

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

button,
input,
select,
textarea {
  max-width: 100%;
  min-width: 0;
}

pre,
code,
.mono,
.step9-code,
.secret {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Main website and standalone pages. */
.page,
.shell,
main.page,
main.shell {
  max-width: calc(100% - (2 * var(--cm-viewport-gap))) !important;
}

.topbar,
.top,
.heading,
.marketplace-heading,
.community-market-heading,
.online-section-heading,
.panel-head,
.toolbar,
.row,
.top-actions,
.sidebar-footer {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.topbar > *,
.top > *,
.heading > *,
.marketplace-heading > *,
.community-market-heading > *,
.online-section-heading > *,
.panel-head > *,
.toolbar > *,
.row > *,
.top-actions > *,
.sidebar-footer > * {
  min-width: 0;
  max-width: 100%;
}

.heading > p,
.marketplace-heading-side > p {
  text-align: start;
}

/* Line controls and card grids must reflow when browser zoom reduces the CSS viewport. */
.line-switcher {
  grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr)) !important;
}

.line-tab,
.panel,
.card,
.market-card,
.crate-card,
.inventory-card,
.community-listing,
.online-listing,
.info-box,
.cloud-account-box {
  min-width: 0 !important;
  max-width: 100%;
}

/* Login, signup, result, settings, leaderboard, support and admin dialogs. */
.modal,
.modal-backdrop,
.step8-support-modal,
.step7-mfa-overlay,
.step6-maintenance-overlay,
.step12-auth-gate,
.market-alert-overlay,
[role="dialog"][aria-modal="true"] {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--cm-viewport-gap) !important;
}

.modal-card,
.auth-card,
.step8-support-card,
.step7-mfa-card,
.step6-maintenance-card,
.step12-auth-gate-card,
.market-alert-dialog,
.modal-backdrop > article.modal,
[role="dialog"][aria-modal="true"] > :first-child {
  box-sizing: border-box;
  width: min(100%, 54rem);
  max-width: calc(100vw - (2 * var(--cm-viewport-gap))) !important;
  max-height: calc(var(--cm-visible-height, 100dvh) - (2 * var(--cm-viewport-gap))) !important;
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.auth-card,
#authModal > .modal-card {
  width: min(100%, 30rem);
}

.modal-text,
.auth-form,
.auth-field,
.cloud-save-panel,
.step12-settings-grid,
.step12-leaderboard-wrap,
.step12-status-grid,
.step12-personal-rank,
.step8-support-card,
.modal-body {
  min-width: 0;
  max-width: 100%;
}

.auth-mode-switch,
.cloud-save-actions,
.step12-setting-row,
.step12-personal-rank,
.market-alert-dialog-head,
.market-alert-dialog-foot {
  flex-wrap: wrap;
}

.auth-mode-switch > *,
.cloud-save-actions > *,
.step12-setting-row > *,
.market-alert-dialog-head > *,
.market-alert-dialog-foot > * {
  min-width: 0;
  max-width: 100%;
}

.step12-leaderboard-scroll,
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto !important;
  overscroll-behavior: contain;
}

.step12-leaderboard-table,
.table-wrap table {
  width: 100%;
  min-width: min(34rem, 100%);
}

/* Turnstile remains usable at large browser zoom and in the Android WebView. */
#step7TurnstileHost,
#resetTurnstileHost,
#adminTurnstileHost,
[id*="TurnstileHost"],
.cf-turnstile {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: start;
}

#step7TurnstileHost iframe,
#resetTurnstileHost iframe,
#adminTurnstileHost iframe,
[id*="TurnstileHost"] iframe,
.cf-turnstile iframe {
  display: block;
  max-width: 100%;
}

/* Account page. */
.grid,
.facts,
.plans,
.grid-2,
.metrics,
.action-grid,
.detail-summary {
  min-width: 0;
  max-width: 100%;
}

.qr {
  min-width: 0;
  max-width: 100%;
}

.qr img {
  width: min(180px, 100%);
  height: auto;
  aspect-ratio: 1;
}

/* Admin page: preserve navigation access at any zoom level. */
.login-gate {
  max-width: 100%;
  overflow: auto;
  padding: var(--cm-viewport-gap) !important;
}

.login-card {
  width: min(100%, 34rem) !important;
  max-height: calc(var(--cm-visible-height, 100dvh) - (2 * var(--cm-viewport-gap)));
  overflow: auto;
}

.shell {
  min-width: 0;
}

#app.shell {
  width: 100% !important;
  max-width: 100% !important;
}

.sidebar,
.main,
.section,
.panel-body,
.detail-card,
.action-box {
  min-width: 0;
  max-width: 100%;
}

.sidebar {
  max-height: var(--cm-visible-height, 100dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Android/native-WebView layout marker added by MainActivity. */
html.crate-market-android .modal-card,
html.crate-market-android .step8-support-card,
html.crate-market-android .step12-auth-gate-card,
html.crate-market-android .market-alert-dialog {
  max-height: calc(var(--cm-visible-height, 100dvh) - 12px) !important;
}

@media (max-width: 980px) {
  .grid,
  .grid-2,
  .plans,
  .online-layout,
  .marketplace-activity-grid,
  .metrics,
  .action-grid,
  .detail-summary {
    grid-template-columns: 1fr !important;
  }

  .wide {
    grid-column: auto !important;
  }

  .qr {
    grid-template-columns: 1fr !important;
    justify-items: start;
  }

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

  .sidebar {
    position: static !important;
    width: 100% !important;
    max-height: none;
  }

  .nav {
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .topbar,
  .top,
  .heading,
  .marketplace-heading,
  .community-market-heading,
  .online-section-heading,
  .panel-head {
    align-items: stretch !important;
    flex-direction: column;
  }

  .top-actions,
  .marketplace-heading-side,
  .community-market-meta,
  .cloud-account-box,
  .cloud-account-actions {
    width: 100%;
  }

  .top-actions > .btn,
  .cloud-account-actions > .btn,
  .community-market-meta > *,
  .marketplace-heading-side > * {
    flex: 1 1 100%;
    width: 100%;
  }

  .step12-setting-row {
    align-items: stretch;
    flex-direction: column;
  }

  .step12-setting-row input[type="checkbox"] {
    align-self: flex-start;
  }

  .market-alert-columns {
    grid-template-columns: 1fr !important;
  }

  .market-alert-dialog-foot,
  .market-alert-dialog-head {
    align-items: stretch;
    flex-direction: column;
  }

  .market-alert-dialog-foot button {
    width: 100%;
  }

  .modal-card,
  .auth-card,
  .step8-support-card,
  .step12-auth-gate-card {
    padding: clamp(14px, 4vw, 22px) !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 420px) {
  :root { --cm-viewport-gap: 6px; }

  .page,
  .shell,
  main.page,
  main.shell {
    max-width: calc(100% - 8px) !important;
  }

  .panel,
  .card,
  .modal-card,
  .auth-card {
    border-radius: 13px !important;
  }

  .step12-leaderboard-table th,
  .step12-leaderboard-table td,
  .table-wrap th,
  .table-wrap td {
    padding: 8px !important;
  }
}


/* Step 19 R4: preserve vertical page scrolling in embedded mobile web views. */
html.crate-market-android,
html.crate-market-android body,
html.crate-market-ios,
html.crate-market-ios body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  touch-action: pan-y pinch-zoom !important;
  -webkit-overflow-scrolling: touch;
}
html.crate-market-android .line-switcher,
html.crate-market-android .top-actions,
html.crate-market-ios .line-switcher,
html.crate-market-ios .top-actions {
  touch-action: pan-x pan-y pinch-zoom !important;
}


/* Step 19 R5: inventory protection, marketplace spacing and mobile-safe overlays. */
.market-card { padding-bottom: 14px !important; }
.market-card .market-actions { margin-top: 12px !important; margin-bottom: 2px !important; padding-bottom: 2px !important; align-items: stretch; }
.market-card .market-actions .btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.cm-inventory-full-overlay { position: fixed; inset: 0; z-index: 2147483000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(5,7,16,.78); backdrop-filter:blur(8px); }
.cm-inventory-full-card { width:min(520px,100%); max-height:min(86dvh,720px); overflow:auto; border:1px solid rgba(167,139,250,.45); border-radius:22px; background:linear-gradient(145deg,#17182b,#0d1020); box-shadow:0 24px 80px rgba(0,0,0,.55); padding:24px; color:#fff; }
.cm-inventory-full-card h2 { margin:0 0 10px; font-size:1.45rem; }
.cm-inventory-full-card p { margin:0; color:#c8cce0; line-height:1.55; }
.cm-inventory-full-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.cm-inventory-full-actions .btn { flex:1 1 140px; min-height:42px; }
.cm-open-busy { pointer-events:none !important; opacity:.65 !important; }
@media (max-width:520px){ .market-card{padding-bottom:12px!important}.cm-inventory-full-card{padding:20px;border-radius:18px}.cm-inventory-full-actions{flex-direction:column}.cm-inventory-full-actions .btn{width:100%;flex:auto} }

/* Step 19 R6: flexible Dynamic Marketplace cards with protected bottom spacing. */
.market-card {
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: auto auto auto auto;
  align-content: start !important;
  padding-bottom: 16px !important;
  overflow: visible !important;
}
.market-card .market-actions {
  align-self: end;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 5px !important;
  padding-bottom: 0 !important;
  gap: 7px !important;
}
.market-card .market-actions .btn {
  min-height: 40px;
  height: auto;
  line-height: 1.2;
  padding-block: 8px;
}
@media (max-width: 520px) {
  .market-card {
    min-height: 0 !important;
    padding: 11px 11px 15px !important;
  }
  .market-card .market-actions {
    padding-top: 6px !important;
  }
}

/* Step 19 R7: full-height embedded mobile pages inside the native shell. */
html.cm-native-embedded-page {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  background: var(--bg, #09070f);
}
html.cm-native-embedded-page body {
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
html.cm-native-embedded-page .cm-android-back-to-game {
  display: none !important;
}
html.cm-native-embedded-page .shell,
html.cm-native-embedded-page #app.shell,
html.cm-native-embedded-page .gate,
html.cm-native-embedded-page .login-gate {
  min-height: 100dvh !important;
  max-height: none !important;
}
html.cm-native-embedded-page .shell,
html.cm-native-embedded-page #app.shell {
  margin-top: 0 !important;
}


/* Step 19 R9: Android/iOS embedded pages keep one authoritative finger-scroll surface. */
html.cm-native-embedded-page {
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
}
html.cm-native-embedded-page body {
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}
html.cm-native-embedded-page .shell,
html.cm-native-embedded-page #app.shell,
html.cm-native-embedded-page .page,
html.cm-native-embedded-page main {
  max-height: none !important;
  overflow: visible !important;
}