/* Rotate prompt — hidden by default, shown in portrait on small screens */
#rotate-prompt {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-color);
  color: var(--text-color);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 18px;
  z-index: 9999;
  text-align: center;
  padding: 20px;
}

.rotate-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

/* Portrait on small screens: show rotate prompt, hide game */
@media (max-width: 600px) and (orientation: portrait) {
  #game {
    display: none;
  }

  #rotate-prompt {
    display: flex !important;
  }
}

/* Landscape scaling for small screens */
@media (max-width: 932px) and (orientation: landscape) {
  :root {
    --card-width: calc((100vw - 80px) / 9);
    --card-overlap: calc(var(--card-width) * 0.3);
    --waste-overlap: calc(var(--card-width) * 0.25);
    --zone-gap: 8px;
    --board-padding: 8px;
  }

  #game {
    max-width: 100%;
    padding: var(--board-padding);
  }

  #top-bar {
    padding: 4px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
  }

  #top-bar button {
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
  }

  #game-info {
    gap: 12px;
    font-size: 12px;
  }

  .notice {
    margin: 0 0 6px;
    padding: 4px 8px;
    font-size: 12px;
  }

  #tableau {
    gap: 4px;
  }

  #foundations-sidebar {
    gap: 4px;
    height: calc(100vh - 50px);
    justify-content: space-between;
  }

  /* Scale foundation zones to fit viewport height */
  #foundations-sidebar .zone {
    min-height: 0;
  }

  #foundations-sidebar .zone-placeholder {
    height: calc((100vh - 70px) / 4);
  }

  .zone {
    border-radius: 4px;
  }

  .zone-placeholder {
    border-radius: 4px;
  }

  .card {
    border-radius: 4px;
  }

  .suit-icon {
    font-size: 20px;
  }

  .placeholder-label {
    font-size: 10px;
  }

  #stock-zone.free-cell .placeholder-label::after {
    font-size: 9px;
  }
}

/* Fullscreen button — hidden on desktop, visible on mobile */
#btn-fullscreen {
  display: none;
}

@media (max-width: 932px) {
  #btn-fullscreen {
    display: inline-block;
  }
}

/* Fullscreen mode: fit game to viewport height */
.is-fullscreen #game {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.is-fullscreen #board {
  flex: 1;
  min-height: 0;
}

.is-fullscreen #main-area {
  min-height: 0;
}

/* Dialog sizing for mobile */
@media (max-width: 932px) {
  .dialog {
    min-width: 0;
    width: 90vw;
    max-width: 420px;
  }
}