/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 480px) {
  .app-container {
    border-radius: 0;
  }

  .resource-item {
    font-size: 12px;
  }

  .btn {
    font-size: 14px;
    padding: 10px;
  }

  .modal-content {
    border-radius: 0;
  }

  .building-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .building-info {
    grid-template-columns: 1fr 1fr;
  }

  .cost-items-row {
    grid-template-columns: 1fr;
  }

  .main-page-shell {
    gap: 10px;
    padding: 0 12px;
  }

  .fortress-header {
    flex-direction: row;
    align-items: center;
  }

  .fortress-layout {
    flex-direction: row;
  }

  .main-action-grid {
    grid-template-columns: 1fr;
  }

  .main-action-card {
    min-height: unset;
  }

  .btn-coin {
    font-size: 0;
  }

  .coin-face-icon {
    width: 280px;
    height: 280px;
  }

  .coin-mining-header,
  .coin-mining-stats {
    padding-left: 12px;
    padding-right: 12px;
  }
}