/*
  Phase 46D — Duelist Kingdom Mobile Pass
  Targets the Duelist Kingdom dashboard/pages and Discord connect flow.
  Safe CSS-only responsiveness patch.
*/

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.pk-shell,
.pk-page,
.pk-dashboard-shell,
.dk-connect-shell,
.wrap {
  max-width: min(1180px, calc(100vw - 28px));
  width: 100%;
}

.pk-hero {
  gap: clamp(14px, 3vw, 28px);
}

.pk-hero h1,
.pk-page h1,
.pk-shell h1 {
  overflow-wrap: anywhere;
  word-break: normal;
}

.pk-hero p,
.pk-card p,
.pk-panel p,
.pk-help-box p,
.pk-muted,
.pk-small-note {
  overflow-wrap: anywhere;
}

.pk-inline-panel,
.pk-actions,
.pk-auth-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.pk-inline-panel > *,
.pk-actions > *,
.pk-auth-buttons > * {
  min-width: 0;
}

.pk-btn,
.pk-actions button,
.pk-auth-buttons a,
.pk-inline-panel a,
.pk-inline-panel button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.pk-page-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.pk-page-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
}

.pk-grid,
.pk-grid.pk-grid-2,
.pk-grid.pk-grid-3,
.pk-hub-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.pk-card,
.pk-panel,
.pk-hero-card,
.pk-discord-card,
.pk-code-card,
.pk-help-box,
.pk-login-required {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pk-code-card code,
.pk-code-card pre,
.pk-discord-card code,
.pk-discord-card pre {
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.pk-status,
.pk-status *,
.pk-identity-mount,
#pkDashboardIdentity,
#pkCheckInPanel,
#pkNotificationsPanel,
#pkLeaderboard {
  min-width: 0;
  max-width: 100%;
}

table {
  max-width: 100%;
}

.pk-table-wrap,
.table-wrap,
.dtn-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
  .pk-shell,
  .pk-page,
  .pk-dashboard-shell,
  .dk-connect-shell,
  .wrap {
    max-width: calc(100vw - 20px);
    padding-left: 10px;
    padding-right: 10px;
  }

  .pk-hero {
    grid-template-columns: 1fr !important;
    padding: 18px 14px;
    text-align: left;
  }

  .pk-hero h1,
  .pk-page h1,
  .pk-shell h1 {
    font-size: clamp(1.75rem, 9vw, 2.6rem);
    line-height: 1.05;
  }

  .pk-hero p {
    font-size: 0.98rem;
  }

  .pk-inline-panel,
  .pk-actions,
  .pk-auth-buttons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .pk-inline-panel .pk-small-note {
    text-align: center;
    width: 100%;
  }

  .pk-btn,
  .pk-actions button,
  .pk-auth-buttons a,
  .pk-inline-panel a,
  .pk-inline-panel button {
    width: 100%;
    justify-content: center;
  }

  .pk-page-nav {
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .pk-page-nav a {
    font-size: 0.9rem;
    padding: 9px 11px;
  }

  .pk-grid,
  .pk-grid.pk-grid-2,
  .pk-grid.pk-grid-3,
  .pk-hub-grid {
    grid-template-columns: 1fr !important;
  }

  .pk-card,
  .pk-panel,
  .pk-hero-card,
  .pk-help-box,
  .pk-login-required {
    padding: 14px;
  }

  .pk-login-required {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dk-connect-step-badge {
    display: inline-flex;
    margin-bottom: 8px;
  }

  .pk-help-box ol {
    padding-left: 20px;
  }

  .pk-help-box li {
    margin-bottom: 8px;
  }
}

@media (max-width: 420px) {
  .pk-shell,
  .pk-page,
  .pk-dashboard-shell,
  .dk-connect-shell,
  .wrap {
    max-width: calc(100vw - 14px);
    padding-left: 7px;
    padding-right: 7px;
  }

  .pk-hero,
  .pk-card,
  .pk-panel,
  .pk-hero-card,
  .pk-help-box {
    border-radius: 18px;
  }

  .pk-page-nav a {
    font-size: 0.84rem;
    padding: 8px 10px;
  }
}