/* Kronenfall – Mobile Querformat (Landscape-first) */

.mobile-portrait-gate {
  align-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(216, 166, 79, 0.16), transparent 42%),
    linear-gradient(180deg, #120e0b 0%, #1a1410 100%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1.5rem;
  position: fixed;
  z-index: 100000;
}

.mobile-portrait-gate[hidden] {
  display: none !important;
}

.mobile-portrait-gate-card {
  backdrop-filter: blur(18px);
  background: rgba(14, 10, 8, 0.82);
  border: 1px solid rgba(216, 166, 79, 0.24);
  border-radius: 1.25rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  max-width: 20rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.mobile-portrait-gate-icon {
  animation: mobile-portrait-rotate 2.4s ease-in-out infinite;
  font-size: 2.4rem;
  margin-bottom: 0.75rem;
}

.mobile-portrait-gate-card h2 {
  font-size: 1.2rem;
  margin: 0 0 0.45rem;
}

.mobile-portrait-gate-card p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

@keyframes mobile-portrait-rotate {
  0%,
  100% {
    transform: rotate(0deg);
  }

  45% {
    transform: rotate(90deg);
  }
}

body.is-portrait-blocked {
  overflow: hidden;
}

/* Profil/Login: nur im Hochformat stapeln */
@media (max-width: 900px) and (orientation: portrait) {
  .profile-shell-inner {
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding-bottom: 2rem;
  }

  .profile-shell-hero {
    max-width: none;
    padding-top: 0.5rem;
  }

  .profile-shell-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }

  .profile-shell-features {
    display: none;
  }

  .profile-shell-panel {
    max-height: none;
  }

  .profile-card-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-card-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-create-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-menu-header {
    align-items: start;
    flex-direction: column;
  }

  .account-logout-button {
    margin-left: 0;
  }
}

html.is-mobile-client body.is-mobile-landscape {
  overflow: hidden;
}

html.is-mobile-client body.is-mobile-landscape .app {
  margin: 0;
  max-width: none;
  min-height: 100dvh;
  padding: 0;
  width: 100%;
}

html.is-mobile-client body.is-mobile-landscape .app:not(.is-castle-view):not(.is-harbor-view) .hero,
html.is-mobile-client body.is-mobile-landscape .app:not(.is-castle-view):not(.is-harbor-view) .section-heading p,
html.is-mobile-client body.is-mobile-landscape .app:not(.is-castle-view):not(.is-harbor-view) .section-heading .badge {
  display: none;
}

html.is-mobile-client body.is-mobile-landscape .app:not(.is-castle-view):not(.is-harbor-view) .section-heading {
  margin-bottom: 0.35rem;
}

html.is-mobile-client body.is-mobile-landscape .app:not(.is-castle-view):not(.is-harbor-view) .section-heading h2 {
  font-size: 1rem;
}

html.is-mobile-client body.is-mobile-landscape .app:not(.is-castle-view):not(.is-harbor-view) .panel {
  border-radius: 0.85rem;
  margin-bottom: 0.5rem;
  padding: 0.65rem;
}

html.is-mobile-client body.is-mobile-landscape .world-map {
  height: calc(100dvh - 3.5rem);
  min-height: calc(100dvh - 3.5rem);
}

html.is-mobile-client body.is-mobile-landscape #worldPanel.panel {
  margin: 0;
  min-height: 100dvh;
}

/* Profil / Login im Querformat */
html.is-mobile-client body.is-mobile-landscape .profile-screen {
  min-height: 100dvh;
}

html.is-mobile-client body.is-mobile-landscape .profile-shell-inner {
  align-items: stretch;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
  min-height: 100dvh;
  padding: 0.65rem;
}

html.is-mobile-client body.is-mobile-landscape .profile-shell-hero {
  align-content: center;
  display: grid;
  max-width: none;
}

html.is-mobile-client body.is-mobile-landscape .profile-shell-title {
  font-size: clamp(1.45rem, 4.5dvh, 2rem);
}

html.is-mobile-client body.is-mobile-landscape .profile-shell-tagline {
  font-size: 0.92rem;
}

html.is-mobile-client body.is-mobile-landscape .profile-shell-subtitle {
  font-size: 0.85rem;
}

html.is-mobile-client body.is-mobile-landscape .profile-shell-features {
  display: grid;
  font-size: 0.82rem;
  gap: 0.45rem;
}

html.is-mobile-client body.is-mobile-landscape .profile-shell-panel {
  max-height: calc(100dvh - 1.3rem);
  padding: 0.95rem;
}

html.is-mobile-client body.is-mobile-landscape .profile-card-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.is-mobile-client body.is-mobile-landscape .profile-card-actions {
  grid-template-columns: minmax(0, 1fr) auto;
}

html.is-mobile-client body.is-mobile-landscape .profile-create-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Burg-Ansicht */
html.is-mobile-client body.is-mobile-landscape .app.is-castle-view .castle-map-shell {
  align-items: center;
  justify-content: center;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  padding: 0.15rem 0.15rem 2.85rem;
}

html.is-mobile-client body.is-mobile-landscape .app.is-castle-view .castle-map-stage {
  transform: translateY(-0.5rem);
}

html.is-mobile-client body.is-mobile-landscape .app.is-castle-view #castlePanel.panel {
  min-height: 100dvh;
}

html.is-mobile-client body.is-mobile-landscape .app.is-castle-view .castle-wall-ring {
  --castle-cell-size: min(
    var(--castle-cell-max, 4.35rem),
    calc((100vw - 13.5rem) / var(--castle-ring-span-x)),
    calc((100dvh - 3.25rem) / var(--castle-ring-span-y))
  );
}

html.is-mobile-client body.is-mobile-landscape .castle-left-column {
  bottom: 2.55rem;
  left: 0.3rem;
  top: 0.3rem;
  width: min(11rem, 27vw);
}

html.is-mobile-client body.is-mobile-landscape .castle-left-bottom .castle-chat-panel {
  display: grid;
  gap: 0.25rem;
  max-width: 10.5rem;
  padding: 0.32rem 0.42rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-chat-panel.is-mobile-compact .castle-chat-head strong {
  font-size: 0.72rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-chat-panel.is-mobile-compact .castle-chat-admin-badge,
html.is-mobile-client body.is-mobile-landscape .castle-chat-panel.is-mobile-compact .castle-chat-world-badge {
  font-size: 0.58rem;
  padding: 0.05rem 0.32rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-chat-panel.is-mobile-compact .castle-chat-list {
  max-height: 2.6rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-chat-panel.is-mobile-compact .castle-chat-item {
  font-size: 0.62rem;
  line-height: 1.15;
}

html.is-mobile-client body.is-mobile-landscape .castle-chat-panel.is-mobile-compact .castle-chat-author {
  font-size: 0.58rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-chat-panel.is-mobile-compact .castle-chat-input {
  font-size: 0.68rem;
  padding: 0.22rem 0.38rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-chat-panel.is-mobile-compact .castle-chat-send {
  font-size: 0.72rem;
  min-width: 1.8rem;
  padding: 0.22rem 0.35rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-chat-panel.is-mobile-compact.is-collapsed {
  width: auto;
}

html.is-mobile-client body.is-mobile-landscape .castle-chat-panel.is-mobile-compact.is-expanded .castle-chat-list {
  max-height: min(10rem, 34vh);
}

html.is-mobile-client body.is-mobile-landscape .world-map-chat-overlay {
  bottom: 0.35rem;
  left: 0.3rem;
  max-width: min(10.5rem, 28vw);
}

html.is-mobile-client body.is-mobile-landscape .world-map-chat-overlay .castle-chat-list {
  max-height: 2.35rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-left-bottom .castle-log-launcher {
  margin-top: 0.15rem;
}

html.is-mobile-client body.is-mobile-landscape .mobile-fullscreen-toggle {
  display: inline-flex;
  font-size: 0.72rem;
  min-width: auto;
  padding: 0.38rem 0.55rem;
  white-space: nowrap;
}

html.is-mobile-client body.is-mobile-landscape .castle-top-right-panel {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

html.is-mobile-client body.is-mobile-landscape .map-menu-launcher {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.mobile-fullscreen-toggle {
  display: none;
}

html.is-mobile-client .mobile-fullscreen-toggle {
  display: inline-flex;
}

html.is-mobile-client body.is-mobile-fullscreen .app,
html.is-mobile-client body.is-mobile-fullscreen-fallback .app,
html.is-mobile-client body.is-mobile-fullscreen .profile-screen,
html.is-mobile-client body.is-mobile-fullscreen-fallback .profile-screen {
  height: 100vh;
  max-height: 100vh;
  min-height: 100vh;
  width: 100vw;
}

html.is-mobile-client body.is-mobile-fullscreen-fallback,
html.is-mobile-client body.is-mobile-fullscreen {
  overflow: hidden;
}

html.is-mobile-client body.is-mobile-fullscreen-fallback .app.is-castle-view .castle-map-shell,
html.is-mobile-client body.is-mobile-fullscreen .app.is-castle-view .castle-map-shell,
html.is-mobile-client body.is-mobile-fullscreen-fallback .app.is-harbor-view .harbor-map-shell,
html.is-mobile-client body.is-mobile-fullscreen .app.is-harbor-view .harbor-map-shell {
  max-height: 100vh;
  min-height: 100vh;
  padding-bottom: 2.55rem;
}

html.is-mobile-client body.is-mobile-fullscreen-fallback .app.is-castle-view .castle-wall-ring,
html.is-mobile-client body.is-mobile-fullscreen .app.is-castle-view .castle-wall-ring {
  --castle-cell-size: min(
    var(--castle-cell-max, 4.35rem),
    calc((100vw - 12rem) / var(--castle-ring-span-x)),
    calc((100vh - 2.75rem) / var(--castle-ring-span-y))
  );
}

html.is-mobile-client body.is-mobile-landscape .castle-top-right-panel {
  max-width: min(42vw, 12rem);
  right: 0.3rem;
  top: 0.3rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-hud-dropdown,
html.is-mobile-client body.is-mobile-landscape .castle-menu-dropdown,
html.is-mobile-client body.is-mobile-landscape .castle-shop-dropdown,
html.is-mobile-client body.is-mobile-landscape .castle-log-dropdown {
  max-height: calc(100dvh - 4rem);
  overflow: auto;
  width: min(calc(100vw - 0.8rem), 16rem);
}

html.is-mobile-client body.is-mobile-landscape .castle-bottom-nav {
  bottom: 0.15rem;
  gap: 0.35rem;
  width: min(calc(100vw - 0.6rem), 26rem);
}

html.is-mobile-client body.is-mobile-landscape .castle-world-map-button:not(.castle-world-map-button--icon) {
  font-size: 0.78rem;
  min-width: 5.8rem;
  padding: 0.42rem 0.75rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-world-map-button--icon {
  padding: 0.15rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-world-map-button-icon {
  height: 3.05rem;
  width: 3.05rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-memory-toggle,
html.is-mobile-client body.is-mobile-landscape .castle-shop-toggle:not(.castle-shop-toggle--icon),
html.is-mobile-client body.is-mobile-landscape .castle-bau-toggle:not(.castle-bau-toggle--icon),
html.is-mobile-client body.is-mobile-landscape .castle-log-toggle:not(.castle-log-toggle--icon) {
  font-size: 0.78rem;
  min-width: auto;
  padding: 0.42rem 0.65rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-shop-toggle--icon,
html.is-mobile-client body.is-mobile-landscape .castle-bau-toggle--icon,
html.is-mobile-client body.is-mobile-landscape .castle-social-toggle--icon,
html.is-mobile-client body.is-mobile-landscape .castle-research-toggle--icon,
html.is-mobile-client body.is-mobile-landscape .castle-log-toggle--icon,
html.is-mobile-client body.is-mobile-landscape .harbor-launcher-button--icon {
  padding: 0.15rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-shop-toggle-icon,
html.is-mobile-client body.is-mobile-landscape .capital-shop-toggle-icon,
html.is-mobile-client body.is-mobile-landscape .castle-bau-toggle-icon,
html.is-mobile-client body.is-mobile-landscape .castle-social-toggle-icon,
html.is-mobile-client body.is-mobile-landscape .castle-research-toggle-icon,
html.is-mobile-client body.is-mobile-landscape .castle-quest-toggle-icon,
html.is-mobile-client body.is-mobile-landscape .castle-log-toggle-icon,
html.is-mobile-client body.is-mobile-landscape .harbor-launcher-button-icon {
  height: 3.05rem;
  width: 3.05rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-resource-list {
  font-size: 0.78rem;
  gap: 0.28rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-account-panel,
html.is-mobile-client body.is-mobile-landscape .castle-level-chip,
html.is-mobile-client body.is-mobile-landscape .castle-currency-pill {
  padding: 0.35rem 0.42rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-account-panel--crest {
  padding: 0.15rem 0.22rem 0.3rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-account-crest-hero {
  max-width: 8.5rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-crest-level-num {
  font-size: 1.25rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-crest-resource-value {
  font-size: 0.64rem;
}

html.is-mobile-client body.is-mobile-landscape .castle-layout-mode-rail {
  max-height: calc(100dvh - 3.5rem);
  overflow: auto;
  position: absolute;
  right: 0.3rem;
  top: 3rem;
  width: min(11rem, 30vw);
  z-index: 14;
}

html.is-mobile-client body.is-mobile-landscape .castle-map-center-cluster.has-layout-rail {
  flex-direction: row;
  width: 100%;
}

/* Hafen */
html.is-mobile-client body.is-mobile-landscape .app.is-harbor-view .harbor-map-shell {
  max-height: 100dvh;
  min-height: 100dvh;
  padding: 0.25rem 0.15rem 2.85rem;
}

html.is-mobile-client body.is-mobile-landscape .app.is-harbor-view .harbor-map-shell:not(.has-harbor-scenery) .harbor-build-grid {
  --land-cell-size: min(
    3.5rem,
    calc((100vw - 13.5rem) / var(--castle-width)),
    calc((100dvh - 3.25rem) / var(--castle-height))
  );
}

/* Modals / Menüs */
html.is-mobile-client body.is-mobile-landscape .modal-panel {
  max-height: calc(100dvh - 0.6rem);
  max-width: calc(100vw - 0.6rem);
  overflow: auto;
}

html.is-mobile-client body.is-mobile-landscape .building-interface {
  max-height: calc(100dvh - 1rem);
  overflow: auto;
}

html.is-mobile-client body.is-mobile-landscape .research-tree-detail {
  max-height: 42dvh;
}

html.is-mobile-client body.is-mobile-landscape .keep-side-menu {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.is-mobile-client body.is-mobile-landscape .settings-subnav {
  flex-wrap: wrap;
}

html.is-mobile-client body.is-mobile-landscape .settings-subnav button {
  font-size: 0.78rem;
  padding: 0.42rem 0.55rem;
}

/* Weltkarte HUD */
html.is-mobile-client body.is-mobile-landscape .map-hud {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.is-mobile-client body.is-mobile-landscape .map-menu-dropdown {
  max-height: calc(100dvh - 4rem);
  overflow: auto;
}