/**
 * Platform-wide mobile / touch polish for Aetherra hub and games.
 * Link from every user-facing HTML page after other stylesheets.
 */

:root {
  --vh-full: 100vh;
  --vh-full: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-min: 44px;
}

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

body {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Hub shell */
.landing-wrap {
  padding-bottom: calc(2.5rem + var(--safe-bottom));
}

.hub-dashboard .hub-center {
  padding-bottom: calc(1.5rem + var(--safe-bottom));
}

.hub-dashboard .hub-sidebar {
  padding-bottom: calc(1.5rem + var(--safe-bottom));
}

.landing-page {
  min-height: var(--vh-full);
}

.landing-tab,
.account-tab {
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}

.hub-game-card-action {
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}

.linked-account-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.lore-wiki-mobile-btn {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

/* Lore sticky panels — dynamic viewport */
.lore-wiki-nav-panel,
.lore-wiki-toc-panel {
  max-height: calc(var(--vh-full) - 1.5rem - var(--safe-top) - var(--safe-bottom));
}

/* TCG */
.topbar-pills a,
.topbar-pills button {
  min-height: 2.5rem;
  padding: 0.35rem 0.65rem;
}

.sidebar-icon {
  width: var(--touch-min);
  height: var(--touch-min);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

.online-app {
  min-height: var(--vh-full);
  overflow-x: hidden;
  overflow-y: auto;
}

.online-app #app {
  overflow: visible;
}

.online-shell {
  min-height: calc(var(--vh-full) - 56px - var(--safe-top));
  height: auto;
}

@media (max-width: 900px) {
  .online-shell {
    min-height: auto;
    height: auto;
  }

  .online-log-panel {
    max-height: min(40vh, 280px);
  }

  .online-main {
    overflow: visible;
    min-height: 50vh;
  }
}

/* Rules tables scroll on narrow screens */
.rules-panel .rules-table-wrap,
.rules-panel table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rules-realm-table,
.rules-zone-table,
.rules-panel .keyword-table {
  min-width: 520px;
}

/* Echoes */
#player-stats {
  flex-wrap: wrap;
}

.echoes-wrap {
  max-width: 100%;
  padding-left: max(0.5rem, var(--safe-left));
  padding-right: max(0.5rem, var(--safe-right));
}

.echoes-wrap #encounter-image,
.echoes-wrap .combat-boss-image-wrap img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 600px) {
  .echoes-wrap .landing-header {
    padding-top: 0.35rem;
  }

  .echoes-wrap #game-container.echoes-mode-combat footer,
  .echoes-wrap #game-container.echoes-mode-encounter footer {
    display: none;
  }
}

.audio-mute-button {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0.5rem 0.85rem;
}

/* Relics */
.primary-button,
.secondary-button,
.vault-button {
  min-height: var(--touch-min);
}

/* Hub linked accounts — stack on phones */
@media (max-width: 480px) {
  .linked-account-row {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .linked-account-btn {
    width: 100%;
    min-height: var(--touch-min);
    justify-content: center;
  }

  .landing-tabs {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .relics-hud {
    justify-content: center;
  }

  .relics-title-row {
    flex-direction: column;
    text-align: center;
  }

  main {
    padding: 1rem;
  }
}

@media (max-width: 640px) {
  .topbar-inner {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .topbar-pills {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
}

/* Idle RPG mobile shell */
@media (max-width: 767px) {
  .idle-game-root {
    max-width: 100%;
  }

  .idle-game-root .idle-panel {
    border-radius: 0.75rem;
  }
}
button,
a,
[role='button'],
input,
select,
textarea {
  touch-action: manipulation;
}