/* Potworki v0.0.76 — Mobile Toilet Edition
   Mobile-only overrides. Desktop remains untouched. */

@media (max-width: 720px) {
  :root {
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  html,
  body {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    overscroll-behavior: none;
  }

  body { padding: 0; }

  .game-shell {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  button, .nav-button, .action, .screen-back { touch-action: manipulation; }

  /* ===== Ostoja / wspólny HUD świata ===== */
  .hub-map,
  .forest-map.forest-map-art,
  .forest-exploration-view,
  .forest-viewport,
  .swamp-exploration-view,
  .swamp-viewport {
    height: 100dvh;
    min-height: 100dvh;
  }

  .account-widget {
    left: 8px;
    top: calc(8px + var(--mobile-safe-top));
    width: 54px;
    z-index: 120;
  }

  .account-profile-button { width: 54px; }
  .account-avatar { width: 42px; height: 42px; }
  .account-profile-caption { font-size: .58rem; }

  #hub-view .world-team-hud,
  #forest-view .world-team-hud,
  #swamp-view .world-team-hud {
    left: 8px;
    top: calc(70px + var(--mobile-safe-top));
    width: 148px;
    max-height: 150px;
    padding: 5px;
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(5px);
  }

  #hub-view .world-team-hud::before,
  #forest-view .world-team-hud::before,
  #swamp-view .world-team-hud::before {
    margin: 0 0 2px 3px;
    font-size: .48rem;
    letter-spacing: .11em;
  }

  #hub-view .hud-member,
  #forest-view .hud-member,
  #swamp-view .hud-member {
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 5px;
    min-height: 31px;
    padding: 2px 3px;
  }

  #hub-view .hud-member + .hud-member,
  #forest-view .hud-member + .hud-member,
  #swamp-view .hud-member + .hud-member { margin-top: 1px; }

  #hub-view .hud-portrait,
  #forest-view .hud-portrait,
  #swamp-view .hud-portrait { width: 27px; height: 27px; }

  #hub-view .hud-member-line,
  #forest-view .hud-member-line,
  #swamp-view .hud-member-line {
    gap: 3px;
    font-size: .52rem;
    line-height: 1;
  }

  #hub-view .hud-member-line span,
  #forest-view .hud-member-line span,
  #swamp-view .hud-member-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #hub-view .hud-member-line small,
  #forest-view .hud-member-line small,
  #swamp-view .hud-member-line small {
    flex: 0 0 auto;
    font-size: .47rem;
  }

  #hub-view .hud-hp-track,
  #forest-view .hud-hp-track,
  #swamp-view .hud-hp-track { height: 4px; margin-top: 3px; }

  #hub-view .location-chip {
    top: calc(8px + var(--mobile-safe-top));
    right: 8px;
    left: auto;
    max-width: 48vw;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: .62rem;
    line-height: 1.1;
    text-align: center;
  }

  #hub-view .hub-chronicle-button {
    right: 8px;
    top: calc(50px + var(--mobile-safe-top));
    gap: 5px;
    padding: 7px 8px;
    border-radius: 9px;
    font-size: .59rem;
    line-height: 1;
  }

  #hub-view .hub-chronicle-button span { white-space: nowrap; }

  #hub-view .hub-chronicle-button b {
    min-width: 28px;
    padding: 3px 5px;
    font-size: .55rem;
  }

  #hub-view .hub-party { top: 70%; }
  #hub-view .hub-player { width: 48px; height: 72px; }

  #hub-view .hint,
  #forest-view .hint {
    bottom: calc(8px + var(--mobile-safe-bottom));
    max-width: calc(100vw - 16px);
    padding: 8px 10px;
    font-size: .64rem;
    line-height: 1.25;
  }

  /* ===== Pradawny Las ===== */
  #forest-view .forest-roster-toggle {
    right: 8px;
    top: calc(8px + var(--mobile-safe-top));
    min-height: 40px;
    padding: 8px 10px;
    font-size: .62rem;
  }

  #forest-view .forest-roster {
    right: 8px;
    top: calc(52px + var(--mobile-safe-top));
    width: calc(100vw - 16px);
    max-height: min(55dvh, 430px);
    overflow-y: auto;
  }

  #forest-view .forest-touch-controls {
    right: 8px;
    bottom: calc(54px + var(--mobile-safe-bottom));
  }

  #forest-view .forest-touch-controls button {
    min-width: 44px;
    min-height: 42px;
  }

  #forest-view .forest-minimap {
    right: 8px;
    bottom: calc(153px + var(--mobile-safe-bottom));
  }

  #forest-view .forest-live-message {
    bottom: calc(8px + var(--mobile-safe-bottom));
  }

  /* ===== WALKA — pełny mobilny układ ===== */
  #battle-view.battle-view-v2 {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    padding-top: var(--mobile-safe-top);
    padding-bottom: var(--mobile-safe-bottom);
  }

  #battle-view .battle-arena,
  .battle-view-v2 .battle-arena {
    inset: var(--mobile-safe-top) 0 var(--mobile-safe-bottom) 0;
    height: auto;
    min-height: 0;
    background-size: cover;
    background-position: center;
  }

  #battle-view .battle-hud {
    top: 7px;
    width: calc(50% - 11px);
    min-height: 66px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: .62rem;
  }

  #battle-view .player-hud { left: 7px; }
  #battle-view .enemy-hud { right: 7px; }

  #battle-view .battle-hud > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 4px;
  }

  #battle-view .battle-hud > div:first-child strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
  }

  #battle-view .battle-hud small {
    flex: 0 0 auto;
    font-size: .52rem;
    white-space: nowrap;
  }

  #battle-view .battle-hud .hp-row,
  #battle-view .battle-hud .xp-row {
    gap: 4px;
    font-size: .52rem;
  }

  #battle-view .battle-hud .hp-track,
  #battle-view .battle-hud .xp-track { height: 7px; }

  #battle-view .battle-hud .hp-row > strong {
    min-width: 34px;
    font-size: .54rem;
    text-align: right;
  }

  #battle-view .battle-log-v2 {
    top: 80px;
    bottom: auto;
    left: 7px;
    width: calc(100vw - 14px);
    min-height: 34px;
    max-height: 45px;
    transform: none;
    overflow: hidden;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: .62rem;
    line-height: 1.2;
  }

  #battle-view .battle-utility {
    top: 121px;
    left: 50%;
    width: calc(100vw - 14px);
    transform: translateX(-50%);
    gap: 7px;
  }

  #battle-view .battle-utility .action {
    min-height: 40px;
    border-radius: 10px;
    font-size: .68rem;
  }

  #battle-view .battle-utility .catch {
    flex: 1 1 auto;
    min-width: 0;
  }

  #battle-view .battle-utility .secondary {
    flex: 0 0 108px;
    width: 108px;
    min-width: 108px;
    padding: 8px 9px;
    font-size: .68rem;
  }

  #battle-view .battle-team {
    top: 168px;
    left: 6px;
    bottom: auto;
    width: 124px;
    max-width: 124px;
    max-height: calc(100dvh - 330px);
    gap: 3px;
    overflow-y: auto;
    transform: none;
    scrollbar-width: thin;
  }

  #battle-view .battle-team.collapsed { transform: translateX(-138px); }

  #battle-view .battle-team-toggle {
    top: 171px;
    left: 130px;
    width: 28px;
    height: 44px;
    border-radius: 0 9px 9px 0;
  }

  #battle-view .battle-team-toggle.collapsed { left: 0; }

  #battle-view .battle-team-member {
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 4px;
    min-height: 35px;
    padding: 3px;
    border-radius: 8px;
  }

  #battle-view .battle-team-portrait { width: 29px; height: 29px; }

  #battle-view .battle-team-member > span:last-child strong {
    overflow: hidden;
    font-size: .55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #battle-view .battle-team-member > span:last-child small {
    margin-top: 1px;
    font-size: .47rem;
  }

  #battle-view .battle-team-member i {
    height: 4px;
    margin-top: 2px;
  }

  #battle-view .battle-stage {
    width: 51vw;
    height: 34dvh;
    max-height: 320px;
    min-height: 210px;
  }

  #battle-view .player-stage {
    left: -2vw;
    right: auto;
    bottom: 22%;
  }

  #battle-view .enemy-stage {
    left: auto;
    right: -1vw;
    bottom: 40%;
  }

  #battle-view .battle-stage .combatant,
  #battle-view .battle-stage .player-combatant,
  #battle-view .battle-stage .enemy-combatant {
    left: 3%;
    right: 3%;
    bottom: auto;
  }

  #battle-view .battle-stump-platform { width: 104%; }

  #battle-view .battle-actions,
  .battle-view-v2 .battle-actions {
    left: 0;
    right: 0;
    bottom: var(--mobile-safe-bottom);
    width: 100%;
    max-height: 154px;
    overflow-y: auto;
    padding: 8px 7px 8px;
    gap: 5px;
    background: linear-gradient(0deg, #06120d 83%, #06120df3 92%, #06120d00);
  }

  #battle-view .skill-buttons,
  .battle-view-v2 .skill-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  #battle-view .skill-buttons .action,
  .battle-view-v2 .skill-buttons .action {
    min-height: 44px;
    padding: 6px 7px;
    border-radius: 9px;
    font-size: .72rem;
    line-height: 1.05;
  }

  #battle-view .skill-buttons .action small {
    margin-top: 2px;
    font-size: .52rem;
  }

  #battle-view .skill-pager {
    min-height: 27px;
    gap: 7px;
  }

  #battle-view .skill-pager button {
    min-width: 42px;
    min-height: 27px;
    padding: 3px 9px;
  }

  #battle-view .skill-page-label { font-size: .65rem; }

  /* ===== Kolekcje / modale ===== */
  .collection-view,
  #team-view,
  #sanctuary-view,
  #breeding-view,
  #codex-view,
  #chronicle-view {
    min-height: 100dvh;
    padding-bottom: calc(32px + var(--mobile-safe-bottom));
    overflow-x: hidden;
  }

  .screen-back { min-height: 42px; }

  .level-overlay,
  .hatch-overlay,
  .creature-details-overlay,
  .codex-details-overlay {
    padding-bottom: calc(8px + var(--mobile-safe-bottom));
  }

  .level-panel,
  .hatch-panel,
  .creature-details-panel,
  .codex-details-panel {
    max-height: calc(100dvh - 16px - var(--mobile-safe-top) - var(--mobile-safe-bottom));
  }

  #team-view .team-member-card,
  #team-view .team-empty-slot { min-height: 420px; }

  #chronicle-view .chronicle-hero {
    gap: 14px;
    padding: 26px 18px;
  }

  #chronicle-view .chronicle-seal {
    width: 78px;
    flex-basis: 78px;
  }

  #chronicle-view .chronicle-seal span {
    width: 64px;
    font-size: .52rem;
  }

  .auth-gate,
  .profile-overlay,
  .starter-overlay {
    min-height: 100dvh;
    padding-top: var(--mobile-safe-top);
    padding-bottom: var(--mobile-safe-bottom);
  }

  .profile-panel { min-height: 100dvh; }
}

@media (max-width: 390px) {
  #hub-view .world-team-hud,
  #forest-view .world-team-hud,
  #swamp-view .world-team-hud { width: 138px; }

  #hub-view .location-chip {
    max-width: 44vw;
    font-size: .58rem;
  }

  #battle-view .battle-hud {
    min-height: 62px;
    padding: 6px;
  }

  #battle-view .battle-log-v2 { top: 76px; }
  #battle-view .battle-utility { top: 116px; }
  #battle-view .battle-team { top: 162px; width: 116px; max-width: 116px; }
  #battle-view .battle-team-toggle { top: 165px; left: 122px; }
  #battle-view .battle-stage { width: 52vw; height: 32dvh; min-height: 195px; }
  #battle-view .player-stage { bottom: 23%; }
  #battle-view .enemy-stage { bottom: 41%; }
  #battle-view .battle-actions { max-height: 148px; }
  #battle-view .skill-buttons .action { font-size: .68rem; }
}

@media (max-width: 720px) and (max-height: 700px) {
  #battle-view .battle-hud { min-height: 58px; }
  #battle-view .battle-log-v2 { top: 72px; max-height: 34px; }
  #battle-view .battle-utility { top: 110px; }
  #battle-view .battle-team { top: 154px; max-height: 180px; }
  #battle-view .battle-team-toggle { top: 157px; }
  #battle-view .battle-stage { height: 31dvh; min-height: 170px; }
  #battle-view .player-stage { bottom: 25%; }
  #battle-view .enemy-stage { bottom: 43%; }
  #battle-view .battle-actions { max-height: 138px; }
  #battle-view .skill-buttons .action { min-height: 40px; }
}

/* v0.0.62 — chodzona Ostoja: scena nie jest już statycznym hotspot-mapem */
@media (max-width:720px){
  #hub-view .hub-map.hub-walk-viewport{width:100vw;height:100dvh;min-height:0;aspect-ratio:auto;background:none!important;background-color:#07110e!important}
  #hub-view .hub-walk-world{display:block;position:absolute;width:1600px!important;height:900px!important;background:url('../assets/locations/ostoja-pierwszych.webp') center/100% 100% no-repeat!important}
  #hub-view .hub-party.hub-walker{position:absolute!important;display:flex!important;top:auto;left:auto;transform:translate(-50%,-88%)!important}
}

/* ===== FINALNY MOBILE HUD CLEANUP ===== */
@media (max-width: 720px) {
  /* Drużyna jako pasek portretów na górze, bez nazw / LVL / HP */
  #hub-view .world-team-hud,
  #forest-view .world-team-hud,
  #swamp-view .world-team-hud {
    left: 50%;
    right: auto;
    top: calc(8px + var(--mobile-safe-top));
    width: auto;
    max-width: 58vw;
    min-height: 0;
    max-height: none;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    overflow: visible;
    border-radius: 14px;
  }

  #hub-view .world-team-hud::before,
  #forest-view .world-team-hud::before,
  #swamp-view .world-team-hud::before { display: none; }

  #hub-view .hud-member,
  #forest-view .hud-member,
  #swamp-view .hud-member {
    display: block;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 2px;
    border-radius: 10px;
    flex: 0 0 38px;
  }

  #hub-view .hud-member + .hud-member,
  #forest-view .hud-member + .hud-member,
  #swamp-view .hud-member + .hud-member { margin-top: 0; }

  #hub-view .hud-portrait,
  #forest-view .hud-portrait,
  #swamp-view .hud-portrait {
    width: 34px;
    height: 34px;
  }

  #hub-view .hud-member > div:last-child,
  #forest-view .hud-member > div:last-child,
  #swamp-view .hud-member > div:last-child { display: none; }

  #hub-view .hud-member.active,
  #forest-view .hud-member.active,
  #swamp-view .hud-member.active {
    border-color: #e3c774;
    background: #d8b75d22;
    box-shadow: 0 0 10px #d8b75d44;
  }

  /* Na telefonie chodzimy kliknięciem — strzałki są zbędne. */
  .hub-touch-controls,
  .forest-touch-controls { display: none !important; }

  /* Powrót do Ostoi po prawej, aby nie walczył z przyciskiem Profil. */
  .collection-view .screen-back {
    display: block;
    width: max-content;
    max-width: calc(100vw - 100px);
    margin-left: auto;
    margin-right: 0;
    text-align: center;
  }

  #team-view .screen-back { margin-left: auto; }
}


/* =========================================================
   v0.0.65 — iPhone / iOS Safari compatibility patch
   - real VisualViewport height instead of relying only on 100dvh
   - keyboard-safe auth forms
   - safe bottom area for battle actions
   ========================================================= */
@media (max-width: 720px) {
  :root {
    --app-height: 100dvh;
    --app-top: 0px;
    --ios-bottom-gap: 0px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    height: -webkit-fill-available;
  }

  html,
  body {
    min-height: var(--app-height, 100dvh);
  }

  body {
    min-height: var(--app-height, 100dvh);
    -webkit-tap-highlight-color: transparent;
  }

  .game-shell {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
  }

  .hub-map,
  .forest-map.forest-map-art,
  .forest-exploration-view,
  .forest-viewport,
  .swamp-exploration-view,
  .swamp-viewport {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
  }

  #hub-view .hub-map.hub-walk-viewport {
    height: var(--app-height, 100dvh);
  }

  /* Safari potrafi zasłonić dół layout viewportu paskiem przeglądarki.
     Cały battle view dostaje wysokość aktualnego VisualViewport. */
  #battle-view.battle-view-v2 {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
  }

  #battle-view .battle-team {
    max-height: calc(var(--app-height, 100dvh) - 330px);
  }

  #battle-view .battle-stage {
    height: min(34dvh, calc(var(--app-height, 100dvh) * .34));
  }

  #battle-view .battle-actions,
  .battle-view-v2 .battle-actions {
    z-index: 30;
    bottom: max(var(--mobile-safe-bottom), var(--ios-bottom-gap));
    padding-bottom: calc(10px + var(--mobile-safe-bottom));
    pointer-events: auto;
    touch-action: manipulation;
  }

  #battle-view .battle-actions button,
  #battle-view .skill-buttons button,
  #battle-view .battle-utility button {
    position: relative;
    z-index: 31;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }

  .collection-view,
  #team-view,
  #sanctuary-view,
  #breeding-view,
  #codex-view,
  #chronicle-view {
    min-height: var(--app-height, 100dvh);
  }

  /* ===== iOS keyboard / login & register ===== */
  .auth-gate {
    inset: auto 0 auto 0;
    top: var(--app-top, 0px);
    width: 100%;
    height: var(--app-height, 100dvh);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    align-items: start;
    padding:
      calc(10px + var(--mobile-safe-top))
      10px
      calc(14px + var(--mobile-safe-bottom));
  }

  .auth-shell {
    width: 100%;
    max-height: none;
    margin: auto 0;
    overflow: visible;
  }

  .auth-panel {
    min-width: 0;
  }

  /* iOS Safari automatycznie zoomuje inputy poniżej 16px.
     16px zapobiega zoomowi i rozsypaniu viewportu po otwarciu klawiatury. */
  .auth-field input,
  .auth-field textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"] {
    font-size: 16px !important;
  }

  .auth-field input,
  .auth-field textarea,
  .auth-submit,
  .auth-tab {
    touch-action: manipulation;
  }

  html.ios-keyboard-open .auth-gate {
    padding-top: max(6px, var(--mobile-safe-top));
    padding-bottom: 8px;
  }

  html.ios-keyboard-open .auth-shell {
    margin: 0;
  }

  html.ios-keyboard-open .auth-story {
    display: none;
  }

  html.ios-keyboard-open .auth-panel {
    padding: 14px 18px 18px;
  }

  html.ios-keyboard-open .auth-panel-copy {
    display: none;
  }

  html.ios-keyboard-open .auth-server-state {
    margin-bottom: 8px;
  }

  html.ios-keyboard-open .auth-tabs {
    margin-bottom: 10px;
  }

  html.ios-keyboard-open .auth-form {
    gap: 9px;
  }

  html.ios-keyboard-open .auth-message {
    margin-top: 7px;
  }

  .profile-overlay,
  .starter-overlay {
    min-height: var(--app-height, 100dvh);
  }

  .level-panel,
  .hatch-panel,
  .creature-details-panel,
  .codex-details-panel {
    max-height: calc(var(--app-height, 100dvh) - 16px - var(--mobile-safe-top) - var(--mobile-safe-bottom));
  }
}

/* Na bardzo niskim VisualViewport (Safari + paski / klawiatura)
   ściskamy walkę zamiast pozwalać przyciskom wypaść poza ekran. */
@media (max-width: 720px) and (max-height: 620px) {
  #battle-view .battle-hud {
    min-height: 54px;
    padding: 5px 6px;
  }

  #battle-view .battle-log-v2 {
    top: 67px;
    max-height: 30px;
    min-height: 30px;
    padding: 5px 7px;
  }

  #battle-view .battle-utility {
    top: 100px;
  }

  #battle-view .battle-utility .action {
    min-height: 36px;
  }

  #battle-view .battle-team,
  #battle-view .battle-team-toggle {
    top: 140px;
  }

  #battle-view .battle-team {
    max-height: 145px;
  }

  #battle-view .battle-stage {
    height: 28dvh;
    min-height: 135px;
  }

  #battle-view .player-stage { bottom: 27%; }
  #battle-view .enemy-stage { bottom: 44%; }

  #battle-view .battle-actions {
    max-height: 126px;
    padding-top: 5px;
  }

  #battle-view .skill-buttons .action {
    min-height: 38px;
    padding: 5px 6px;
  }
}