/* DREAMCARS — universal responsive layer (load last after dc-mobile-pwa-shell.css) */

:root {
  --dc-shell-max: 430px;
  --dc-content-inline: max(12px, env(safe-area-inset-left, 0px));
  --dc-content-inline-end: max(12px, env(safe-area-inset-right, 0px));
  --dc-vv-height: 100dvh;
  --dc-vv-height-fallback: 100vh;
  --dc-keyboard-offset: 0px;
  --dc-keyboard-open: 0;
  --dc-shell-header-gap: 10px;
  --dc-shell-nav-gap: 10px;
  --dc-shell-header-reserve: calc(76px + env(safe-area-inset-top, 0px) + var(--dc-shell-header-gap));
  --dc-shell-nav-reserve: calc(80px + env(safe-area-inset-bottom, 0px) + var(--dc-shell-nav-gap));
}

.dc-shell-top-guard {
  display: block;
  width: 100%;
  height: var(--dc-shell-header-reserve);
  min-height: calc(76px + env(safe-area-inset-top, 0px) + var(--dc-shell-header-gap));
  flex: 0 0 auto;
  pointer-events: none;
  visibility: hidden;
}

/* --- Global: no horizontal page scroll --- */
html {
  overflow-x: clip;
  max-width: 100%;
}

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

.wrap,
.card,
.auth-card,
.modal,
dialog,
[role="dialog"] {
  min-width: 0;
  box-sizing: border-box;
}

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

/* --- Mobile shell: fluid width, not locked to 430px viewport --- */
@media (max-width: 760px) {
  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--dc-content-inline) !important;
    padding-right: var(--dc-content-inline-end) !important;
  }

  body.user-mode:not(.admin-mode) .wrap,
  body.admin-mode.admin-mobile-shell .wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Neutralize bleed-out negative margins (site-visual / project-shell legacy) */
  body.user-mode:not(.admin-mode) header:not(.dc-app-header),
  body.user-mode:not(.admin-mode) .wrap > header:not(.dc-app-header),
  body.user-mode:not(.auth-mode) .wrap > header {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.user-mode .feed-img,
  body.user-mode .contest-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Centered fixed shells: always fit viewport */
  body.user-mode:not(.auth-mode):not(.admin-mode) .user-bottom-nav,
  body.user-mode:not(.auth-mode):not(.admin-mode) nav.user-bottom-nav.dc-bottom-nav,
  body.user-mode:not(.auth-mode):not(.admin-mode) .dc-nav-sheet__panel {
    width: 100% !important;
    max-width: min(100%, var(--dc-shell-max)) !important;
  }

  header.dc-app-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  header.dc-app-header .dc-header-brand,
  header.dc-app-header .dc-header-meta,
  header.dc-app-header .dc-header-actions {
    min-width: 0 !important;
  }

  header.dc-app-header .dc-header-meta:empty {
    display: none !important;
  }

  /* Guest install pill: shrink on narrow screens instead of forcing 132px */
  html body.user-mode:not(.auth-mode):not(.admin-mode) header.dc-app-header.dc-role-guest #pwaInstallBtn.pwa-install-btn,
  html body.user-mode:not(.auth-mode):not(.admin-mode) header.dc-app-header.dc-role-guest .pwa-install-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(132px, 34vw) !important;
    flex: 0 1 auto !important;
    flex-shrink: 1 !important;
  }

  header.dc-app-header .header-subscribers-count {
    font-size: clamp(9px, 2.6vw, 11px) !important;
  }

  header.dc-app-header .header-user {
    max-width: min(160px, 38vw) !important;
  }
}

/* --- Breakpoint tiers (width-based, not device models) --- */
@media (max-width: 360px) {
  :root {
    --dc-content-inline: max(10px, env(safe-area-inset-left, 0px));
    --dc-content-inline-end: max(10px, env(safe-area-inset-right, 0px));
  }

  header.dc-app-header .brand-wordmark-svg {
    max-width: min(140px, 42vw) !important;
  }

  html body.user-mode:not(.auth-mode):not(.admin-mode) nav.user-bottom-nav.dc-bottom-nav {
    padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
  }

  body.stickers-page-open .stickers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.stickers-page-open .sticker-slot,
  body.stickers-page-open .sticker-img,
  body.stickers-page-open .sticker-img-missing {
    width: min(100%, 64px) !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .btn,
  button,
  .auth-card .btn {
    font-size: 13px !important;
  }
}

@media (min-width: 361px) and (max-width: 390px) {
  header.dc-app-header .brand-wordmark-svg {
    max-width: min(160px, 44vw) !important;
  }
}

@media (min-width: 391px) and (max-width: 430px) {
  header.dc-app-header .brand-wordmark-svg {
    max-width: min(180px, 46vw) !important;
  }
}

@media (min-width: 431px) and (max-width: 480px) {
  body.user-mode:not(.admin-mode):not(.guest-home-open) .wrap {
    max-width: min(100%, var(--dc-shell-max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .wrap {
    max-width: min(100% - 32px, 1180px) !important;
  }
}

/* --- Auth: fluid forms + keyboard --- */
body.user-mode.auth-mode,
body.admin-mode.auth-page {
  min-height: var(--dc-vv-height, 100dvh) !important;
  min-height: var(--dc-vv-height-fallback, 100vh) !important;
}

body.user-mode.auth-mode .wrap,
body.admin-mode.auth-page .wrap {
  width: 100% !important;
  max-width: min(100%, var(--dc-shell-max)) !important;
  padding-left: var(--dc-content-inline) !important;
  padding-right: var(--dc-content-inline-end) !important;
}

body.user-mode.auth-mode .auth-card,
body.user-mode.auth-mode .card,
body.admin-mode.auth-page .auth-card {
  width: 100% !important;
  max-width: 100% !important;
}

body.user-mode.auth-mode .auth-login-card .auth-social-buttons,
body.user-mode.auth-mode .user-login-card .auth-social-buttons,
body.user-mode.auth-mode .auth-register-card .auth-social-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: clamp(5px, 2vw, 11px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.user-mode.auth-mode .auth-login-card .auth-social-btn,
body.user-mode.auth-mode .auth-login-card a.auth-social-btn,
body.user-mode.auth-mode .auth-login-card button.auth-social-btn,
body.user-mode.auth-mode .user-login-card .auth-social-btn,
body.user-mode.auth-mode .user-login-card a.auth-social-btn,
body.user-mode.auth-mode .user-login-card button.auth-social-btn,
body.user-mode.auth-mode .auth-register-card .auth-social-btn,
body.user-mode.auth-mode .auth-register-card a.auth-social-btn,
body.user-mode.auth-mode .auth-register-card button.auth-social-btn {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 44px !important;
  max-height: none !important;
  padding: 0 clamp(6px, 2vw, 10px) !important;
  font-size: clamp(10px, 2.8vw, 13px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.user-mode.auth-mode.dc-keyboard-open .wrap {
  justify-content: flex-start !important;
  min-height: auto !important;
  padding-bottom: calc(18px + var(--dc-keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px)) !important;
}

body.user-mode.auth-mode.dc-keyboard-open .auth-card,
body.user-mode.auth-mode.dc-keyboard-open .card {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* --- Modals / sheets: viewport height + internal scroll --- */
.dc-nav-sheet__panel,
.admin-contest-delete-dialog,
body.admin-mode.admin-mobile-shell .contest-promotion-settings-dialog {
  max-height: min(90dvh, calc(var(--dc-vv-height, 100dvh) - 16px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.profile-user-open .pu-exchange__panel {
  max-height: min(88dvh, calc(var(--dc-vv-height, 100dvh) - env(safe-area-inset-top, 0px))) !important;
  overflow: hidden !important;
}

body.profile-user-open .pu-exchange__body {
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.profile-user-open .pu-withdraw__panel {
  width: min(100%, 440px) !important;
  max-width: 100% !important;
  max-height: min(88dvh, calc(var(--dc-vv-height, 100dvh) - 32px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.dc-support__panel {
  width: 100% !important;
  max-width: min(100%, var(--dc-shell-max)) !important;
  height: min(88dvh, calc(var(--dc-vv-height, 100dvh) - 16px)) !important;
  max-height: min(88dvh, calc(var(--dc-vv-height, 100dvh) - 16px)) !important;
}

body.stickers-checkout-open .stickers-checkout__panel {
  max-height: min(88dvh, calc(var(--dc-vv-height, 100dvh) - env(safe-area-inset-bottom, 0px))) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.dc-keyboard-open .dc-nav-sheet__panel {
  max-height: min(calc(var(--dc-vv-height, 100dvh) - 8px), 90dvh) !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--dc-keyboard-offset, 0px)) !important;
}

body.pu-exchange-open.dc-keyboard-open .pu-exchange,
body.pu-withdraw-open.dc-keyboard-open .pu-withdraw,
body.dc-support-open.dc-keyboard-open .dc-support,
body.stickers-checkout-open.dc-keyboard-open .stickers-checkout {
  align-items: flex-end !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--dc-keyboard-offset, 0px)) !important;
}

body.pu-exchange-open.dc-keyboard-open .pu-exchange__panel {
  max-height: min(calc(var(--dc-vv-height, 100dvh) - 12px), 88dvh) !important;
}

body.pu-withdraw-open.dc-keyboard-open .pu-withdraw__panel,
body.dc-support-open.dc-keyboard-open .dc-support__panel,
body.stickers-checkout-open.dc-keyboard-open .stickers-checkout__panel {
  max-height: min(calc(var(--dc-vv-height, 100dvh) - var(--dc-keyboard-offset, 0px) - 12px), 88dvh) !important;
}

body.profile-user-open.dc-keyboard-open .profile-page {
  padding-bottom: calc(var(--dc-mobile-content-bottom-reserve, 88px) + var(--dc-keyboard-offset, 0px)) !important;
}

/* --- Tables on mobile (style.css forces min-width:900px on .card table) --- */
@media (max-width: 860px) {
  .card table,
  .wrap > table,
  .wrap table,
  table.responsive-table,
  .admin-history-board table,
  .posts-history-card table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .card table thead,
  .wrap table thead,
  .admin-history-board table thead {
    white-space: nowrap;
  }
}

/* --- Action rows: wrap instead of overflow --- */
@media (max-width: 760px) {
  .profile-actions,
  .pu-wallet-actions,
  .pu-profile-actions,
  .admin-actions,
  .form-actions,
  .btn-row,
  [class*="__actions"]:not(.cp-contest-card__actions) {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .profile-actions .btn,
  .pu-wallet-actions .btn,
  .form-actions .btn,
  .btn-row .btn {
    flex: 1 1 auto !important;
    min-width: min(100%, 140px) !important;
    max-width: 100% !important;
  }
}

/* --- Profile wallet: action buttons + exchange modes --- */
@media (max-width: 480px) {
  body.profile-user-open .pu-wallet__actions .btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.profile-user-open .pu-exchange__modes,
  body.profile-user-open .pu-exchange__foot {
    min-width: 0 !important;
  }

  body.profile-user-open .pu-wallet-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.profile-user-open .pu-wallet-tabs::-webkit-scrollbar {
    display: none;
  }

  body.profile-user-open .pu-wallet-tabs .pu-wallet-tab {
    flex: 0 0 auto !important;
    min-width: max(76px, 22vw) !important;
  }
}

/* --- Landscape short viewports --- */
@media (orientation: landscape) and (max-height: 520px) {
  body.user-mode.auth-mode .wrap {
    justify-content: flex-start !important;
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.user-mode.auth-mode header:not(.dc-app-header) {
    min-height: 56px !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  }

  html body.user-mode:not(.auth-mode):not(.admin-mode) nav.user-bottom-nav.dc-bottom-nav {
    padding-top: 4px !important;
  }

  html body.user-mode:not(.auth-mode):not(.admin-mode) nav.user-bottom-nav.dc-bottom-nav .dc-bottom-nav__bar > .dc-bottom-nav__tab .dc-bottom-nav__label,
  html body.user-mode:not(.auth-mode):not(.admin-mode) nav.user-bottom-nav.dc-bottom-nav .dc-bottom-nav__bar > .dc-bottom-nav__tab .nav-label {
    font-size: 9px !important;
  }
}

/* --- Admin mobile shell --- */
@media (max-width: 760px) {
  body.admin-mode.admin-mobile-shell .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--dc-content-inline) !important;
    padding-right: var(--dc-content-inline-end) !important;
  }

  body.admin-mode.admin-mobile-shell .admin-mobile-bottom-nav,
  body.admin-mobile-shell .admin-mobile-bottom-nav {
    width: 100% !important;
    max-width: min(100%, var(--dc-shell-max)) !important;
  }

  body.admin-mode.admin-mobile-shell .admin-contest-delete-dialog,
  body.admin-mode.admin-mobile-shell .contest-promotion-settings-dialog {
    width: min(calc(100vw - var(--dc-content-inline) - var(--dc-content-inline-end)), var(--dc-shell-max)) !important;
    max-width: 100% !important;
  }
}

/* --- Stickers / legal / contests pages --- */
@media (max-width: 760px) {
  body.stickers-page-open .stickers-vitrine,
  body.legal-page-open .legal-page,
  body.contests-public-open .cp-page,
  body.contest-user-open .cu-page,
  body.live-user-open .lu-page,
  body.profile-user-open .profile-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip;
  }
}

/* --- Auth flash: keep inside wrap on narrow screens --- */
@media (max-width: 760px) {
  body.user-mode.auth-mode .flash {
    left: var(--dc-content-inline) !important;
    right: var(--dc-content-inline-end) !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* --- Unified project shell: fixed header + fixed bottom nav + scroll main --- */
body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) {
  overflow: hidden !important;
  height: 100dvh !important;
  height: var(--dc-vv-height, 100dvh) !important;
  max-height: 100dvh !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html:has(body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main)) {
  overflow: hidden !important;
  height: 100% !important;
}

body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) .wrap {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  height: var(--dc-vv-height, 100dvh) !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) header.dc-app-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  z-index: 5000 !important;
  flex: 0 0 auto !important;
}

body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) nav.user-bottom-nav.dc-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  z-index: 99999 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.98), rgba(0, 0, 0, 1)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 18px 18px 0 0 !important;
}

body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) .dc-shell-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-top: 0 !important;
  padding-bottom: var(--dc-shell-nav-reserve) !important;
  padding-left: var(--dc-content-inline) !important;
  padding-right: var(--dc-content-inline-end) !important;
  box-sizing: border-box !important;
}

@media (max-width: 899px) {
  body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) .dc-shell-top-guard {
    height: calc(env(safe-area-inset-top, 0px) + 88px + var(--dc-shell-header-gap));
    min-height: calc(env(safe-area-inset-top, 0px) + 88px + var(--dc-shell-header-gap));
  }

  body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) .dc-shell-main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px) !important;
  }
}

/* Bottom nav tabs: always centered as a group (portrait + landscape) */
html body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) nav.user-bottom-nav.dc-bottom-nav .dc-bottom-nav__bar {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: clamp(2px, 1.2vw, 8px) !important;
  width: fit-content !important;
  max-width: calc(100% - 12px) !important;
  margin: 0 auto !important;
  grid-template-columns: none !important;
}

html body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) nav.user-bottom-nav.dc-bottom-nav .dc-bottom-nav__bar > a,
html body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) nav.user-bottom-nav.dc-bottom-nav .dc-bottom-nav__bar > .dc-bottom-nav__more {
  flex: 0 0 clamp(62px, 17vw, 76px) !important;
  width: clamp(62px, 17vw, 76px) !important;
  min-width: clamp(62px, 17vw, 76px) !important;
  max-width: clamp(62px, 17vw, 76px) !important;
}

html body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) nav.user-bottom-nav.dc-bottom-nav .dc-bottom-legal {
  justify-content: center !important;
}

/* Desktop width: keep bottom dock flush (no safe-area lift gap) */
@media (min-width: 900px) {
  body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) nav.user-bottom-nav.dc-bottom-nav {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) nav.user-bottom-nav.dc-bottom-nav::before {
    content: none !important;
    display: none !important;
  }

  body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) nav.user-bottom-nav.dc-bottom-nav .dc-bottom-nav__bar > a,
  body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) nav.user-bottom-nav.dc-bottom-nav .dc-bottom-nav__bar > .dc-bottom-nav__more {
    flex: 0 0 74px !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
  }
}

/* Feed V2: internal panes scroll, shell main is flex frame only */
body.feed-v2-surface:has(.dc-shell-main) .dc-shell-main {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: var(--dc-shell-nav-reserve) !important;
}

body.feed-v2-surface:has(.dc-shell-main) .feed-v2-page {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Guest home: scroll lives in dc-shell-main, not body */
body.guest-home-open:has(.dc-shell-main) {
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

body.guest-home-open:has(.dc-shell-main) .wrap {
  padding: 0 !important;
  min-height: 0 !important;
  height: 100dvh !important;
  height: var(--dc-vv-height, 100dvh) !important;
}

body.guest-home-open:has(.dc-shell-main) .dc-shell-main {
  padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
}

body.guest-home-open:has(.dc-shell-main) .gh-ignite__badge,
body.guest-home-open:has(.dc-shell-main) .gh-ignite__headline {
  scroll-margin-top: 8px;
}

/* Neutralize legacy wrap scroll padding when shell owns scrolling */
body.dc-shell-open.user-mode:not(.auth-mode) .wrap,
body.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main):not(.feed-v2-surface) .wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  scroll-padding-bottom: 0 !important;
}

/* DREAMCARS lock marker: 20260611_dc_responsive_shell_v8 */