/* Syndykat 1929 · 17.10.2 · iOS standalone + kompaktowy mobile UI.
   Ostatni arkusz po bundlu, bez zmian w systemach gry. */
:root { --syn-ios-top: env(safe-area-inset-top, 0px); --syn-ios-bottom: env(safe-area-inset-bottom, 0px); }

/* Poprzedni motyw nadpisywał padding-top: env(safe-area-inset-top) w syn-160.css.
   Oddzielamy status bar iOS od rzędu logo i przycisków, bez wpływu na desktop. */
@media (max-width: 900px) {
  html body .main > .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 55 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas: "logo actions" "stats stats" !important;
    grid-template-rows: minmax(40px, auto) minmax(55px, auto) !important;
    align-content: start !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 7px 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(7px + var(--syn-ios-top)) 12px 10px !important;
    overflow: visible !important;
    background: #09131c !important;
  }
  html body .main > .topbar > .mobile-brand {
    grid-area: logo !important;
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(14px, 3.8vw, 17px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body .main > .topbar > .topbar-actions {
    grid-area: actions !important;
    display: flex !important;
    align-items: center !important;
    justify-self: end !important;
    flex: 0 0 auto !important;
    gap: 5px !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body .main > .topbar > .topbar-actions > button {
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    overflow: visible !important;
    line-height: 1 !important;
  }
  /* VIP i wylogowanie należą do menu mobilnego, nie do ciasnego paska. */
  html body .main > .topbar > .topbar-actions > :is(.vip-header-badge, .top-logout) {
    display: none !important;
  }
  html body .main > .topbar > .resources {
    grid-area: stats !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 7px 0 0 !important;
  }
  html body .main > .topbar > .resources > div {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    min-width: 0 !important;
    min-height: 55px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 3px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }
  html body .main > .topbar > .resources small,
  html body .main > .topbar > .resources em {
    max-width: 100% !important;
    font-size: clamp(8px, 2.25vw, 10px) !important;
    line-height: 1.12 !important;
    letter-spacing: .035em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .main > .topbar > .resources strong {
    box-sizing: border-box !important;
    max-width: 100% !important;
    font-size: clamp(12px, 3.5vw, 16px) !important;
    line-height: 1.18 !important;
    font-variant-numeric: tabular-nums !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Nie pozwalamy ikonom lub licznikom wypychać strony poza viewport. */
  html body .main, html body .content, html body .mobile-nav { min-width: 0 !important; max-width: 100% !important; }
  html body .mobile-nav {
    box-sizing: border-box !important;
    padding-left: max(3px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(3px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(7px, var(--syn-ios-bottom)) !important;
  }
  html body .mobile-nav > button {
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 60px !important;
    padding: 8px 2px 7px !important;
    touch-action: manipulation;
  }
  html body .mobile-nav > button small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body .content { padding-bottom: calc(96px + var(--syn-ios-bottom)) !important; }
}

/* W PWA iOS statusbar nachodzi na webview (black-translucent).
   Fallback 54px zabezpiecza iPhone'y, które zgłaszają env() jako 0. */
@media (max-width: 900px) and (display-mode: standalone) {
  @supports (-webkit-touch-callout: none) {
    html body .main > .topbar { padding-top: calc(8px + max(var(--syn-ios-top), 54px)) !important; }
    html body .splash, html body .auth-layout {
      box-sizing: border-box !important;
      padding-top: max(var(--syn-ios-top), 54px) !important;
    }
  }
}
@media (max-width: 900px) {
  html.syn-ios-standalone body .main > .topbar { padding-top: calc(8px + max(var(--syn-ios-top), 54px)) !important; }
  html.syn-ios-standalone body .splash,
  html.syn-ios-standalone body .auth-layout { box-sizing: border-box !important; padding-top: max(var(--syn-ios-top), 54px) !important; }
}

/* Mocno zatłoczone małe ekrany: logo i 4 ikony muszą zmieścić się w jednym rzędzie. */
@media (max-width: 365px) {
  html body .main > .topbar { padding-right: 8px !important; padding-left: 8px !important; column-gap: 5px !important; }
  html body .main > .topbar > .topbar-actions { gap: 3px !important; }
  html body .main > .topbar > .topbar-actions > button { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 36px !important; min-height: 36px !important; flex-basis: 34px !important; }
  html body .main > .topbar > .resources { gap: 4px !important; }
  html body .main > .topbar > .resources > div { padding-left: 1px !important; padding-right: 1px !important; }
  html body .mobile-nav > button small { font-size: 10px !important; letter-spacing: -.01em !important; }
}

/* Profil mobilny: portret obok danych osobowych, statystyki na całą szerokość.
   Usuwa pustą kolumnę pod portretem widoczną na zrzucie iPhone'a. */
@media (max-width: 600px) {
  html body[data-section="dashboard"] .syn160-char {
    display: block !important;
    min-width: 0 !important;
    padding: 15px !important;
  }
  html body[data-section="dashboard"] .syn160-char::after { display: table; content: ""; clear: both; }
  html body[data-section="dashboard"] .syn160-avatar {
    float: left !important;
    width: 94px !important;
    height: 125px !important;
    margin: 0 13px 8px 0 !important;
  }
  html body[data-section="dashboard"] .syn160-char-body {
    display: block !important;
    min-width: 0 !important;
  }
  html body[data-section="dashboard"] .syn160-char-body > :is(.syn-eyebrow,h1,p,small) { margin-bottom: 6px !important; }
  html body[data-section="dashboard"] .syn160-char-body > h1 {
    font-size: clamp(24px, 6.8vw, 35px) !important;
    overflow-wrap: anywhere !important;
  }
  html body[data-section="dashboard"] .syn160-stats {
    clear: both !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: 13px 0 8px !important;
    gap: 8px !important;
  }
  html body[data-section="dashboard"] .syn160-stats > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 70px !important;
    padding: 9px 12px !important;
  }
  html body[data-section="dashboard"] .syn160-stats strong { font-size: clamp(18px, 5vw, 23px) !important; }
  html body[data-section="dashboard"] .syn160-link { display: block !important; width: 100% !important; text-align: right !important; margin-top: 10px !important; }
}

/* Safari na iPhonie powiększa stronę przy fokusie pól z fontem < 16px. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    html body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
      font-size: 16px !important;
    }
  }
}