/*
 * Evolaryn phone layout
 *
 * This file is intentionally loaded after every desktop stylesheet and the
 * legacy inline refinements. Every behavioral override is guarded by the host
 * viewport marker, leaving the approved desktop cascade untouched.
 */

/* Important phone rules in this named layer outrank the legacy unlayered
   important desktop rules without changing any desktop stylesheet. */
@layer evolaryn-phone {
.mobile-hud-actions,
.mobile-targets,
.mobile-selection-head,
.mobile-game-menu,
.mobile-drawer-scrim {
  display: none;
}

html[data-mobile="true"],
html[data-mobile="true"] body {
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0;
  overflow: hidden !important;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

html[data-mobile="true"] body {
  --mobile-topbar-height: 94px;
  --mobile-roster-height: 92px;
  font-size: 14px;
}

html[data-mobile="true"] button,
html[data-mobile="true"] [role="button"],
html[data-mobile="true"] input,
html[data-mobile="true"] select {
  touch-action: manipulation;
}

html[data-mobile="true"] button:focus-visible,
html[data-mobile="true"] [role="button"]:focus-visible {
  outline: 2px solid #7cebf1 !important;
  outline-offset: 2px;
}

/* ---------- Compact two-row in-game HUD ---------- */

html[data-mobile="true"] #game-shell {
  width: 100dvw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-mobile="true"] body #game-shell > .game-topbar {
  position: relative !important;
  z-index: 40 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--mobile-topbar-height) !important;
  min-height: var(--mobile-topbar-height) !important;
  padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 5px max(6px, env(safe-area-inset-left)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: minmax(38px, 1fr) minmax(38px, 1fr) !important;
  grid-template-areas:
    "status mobile-actions"
    "wave-play mobile-actions" !important;
  align-items: center !important;
  gap: 4px 6px !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(97, 210, 222, .27) !important;
  background: linear-gradient(180deg, rgba(8, 28, 34, .99), rgba(3, 12, 16, .99)) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .42) !important;
}

html[data-mobile="true"] #game-shell .game-topbar__brand,
html[data-mobile="true"] #game-shell .game-topbar__dev,
html[data-mobile="true"] #game-shell .game-topbar__menu {
  display: none !important;
}

html[data-mobile="true"] #game-shell .game-topbar__status {
  grid-area: status !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

html[data-mobile="true"] #game-shell .game-topbar__status::-webkit-scrollbar,
html[data-mobile="true"] #game-shell #monsterList::-webkit-scrollbar {
  display: none;
}

html[data-mobile="true"] #game-shell .game-topbar__status > #statsBtn,
html[data-mobile="true"] #game-shell .game-topbar__status > #itemsBtn,
html[data-mobile="true"] #game-shell .game-topbar__status > #sealsBtn,
html[data-mobile="true"] #game-shell .game-topbar__status .score-rank-hint {
  display: none !important;
}

html[data-mobile="true"] #game-shell .game-topbar .hud-stat-chip,
html[data-mobile="true"] #game-shell .game-topbar .hud-score2,
html[data-mobile="true"] #game-shell .game-topbar .challenge-hud-badge,
html[data-mobile="true"] #game-shell .game-topbar .nightmare-pressure-hud {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 3px 7px !important;
  gap: 4px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border-radius: 8px !important;
}

html[data-mobile="true"] #game-shell .game-topbar .hud-inline-icon,
html[data-mobile="true"] #game-shell .game-topbar .hud-btn-icon {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
}

html[data-mobile="true"] #game-shell .game-topbar__wave {
  grid-area: wave-play !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

html[data-mobile="true"] #game-shell .game-topbar__wave > #preparationBtn {
  display: none !important;
}

html[data-mobile="true"] #game-shell .game-topbar__wave > #waveBtn,
html[data-mobile="true"] #game-shell .game-topbar__wave > #autoWaveBtn,
html[data-mobile="true"] #game-shell .game-topbar__play > button {
  min-width: 44px !important;
  min-height: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
}

html[data-mobile="true"] #game-shell .game-topbar__wave > #waveBtn {
  flex: 1 1 128px !important;
  max-width: 170px !important;
}

html[data-mobile="true"] #game-shell .game-topbar__wave > #autoWaveBtn {
  flex: 0 1 auto !important;
  min-width: 74px !important;
  max-width: 118px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-mobile="true"] #game-shell .game-topbar__play {
  position: absolute !important;
  left: clamp(210px, 42vw, 390px) !important;
  right: 158px !important;
  bottom: 5px !important;
  height: 38px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  overflow: hidden !important;
}

html[data-mobile="true"] #game-shell .game-topbar__play > #newGameBtn {
  display: none !important;
}

html[data-mobile="true"] #game-shell .game-topbar__play > #pauseBtn span {
  display: none !important;
}

html[data-mobile="true"] #game-shell .game-topbar__play > #pauseBtn {
  width: 44px !important;
  padding: 3px !important;
}

html[data-mobile="true"] #game-shell .mobile-hud-actions {
  grid-area: mobile-actions !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  width: 150px !important;
}

html[data-mobile="true"] #game-shell .mobile-hud-actions button {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 4px 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: #dffcff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  border: 1px solid rgba(100, 221, 230, .28) !important;
  border-radius: 9px !important;
  background: rgba(14, 54, 62, .72) !important;
}

html[data-mobile="true"] #game-shell .mobile-hud-actions button span {
  color: #7cebf1;
  font-size: 18px;
}

/* ---------- Battlefield, bottom roster and selection drawer ---------- */

html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: calc(100dvh - var(--mobile-topbar-height)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-mobile="true"] body #game-shell .canvas-wrap {
  position: absolute !important;
  inset: 0 0 var(--mobile-roster-height) 0 !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  touch-action: none !important;
}

html[data-mobile="true"] body #game-shell #gameCanvas {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  touch-action: none !important;
}

html[data-mobile="true"] body #game-shell .monster-panel-left {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 12 !important;
  width: auto !important;
  max-width: none !important;
  height: var(--mobile-roster-height) !important;
  min-height: 0 !important;
  padding: 5px max(6px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid rgba(98, 218, 228, .3) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(6, 22, 27, .98), rgba(2, 10, 13, .995)) !important;
  box-shadow: 0 -5px 18px rgba(0, 0, 0, .42) !important;
}

html[data-mobile="true"] body #game-shell .monster-panel-left > h2,
html[data-mobile="true"] body #game-shell .monster-panel-left > p,
html[data-mobile="true"] body #game-shell .monster-panel-left > #inGameTeamSummary {
  display: none !important;
}

html[data-mobile="true"] body #game-shell .monster-panel-left > #monsterList {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList > .monster-btn.ingame-slot {
  position: relative !important;
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  margin: 0 !important;
  padding: 4px !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
  scroll-snap-align: start;
  border-radius: 9px !important;
}

html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList > .monster-btn .slot-number {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  z-index: 3 !important;
  width: 17px !important;
  height: 17px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 9px !important;
  border-radius: 50% !important;
}

html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList .monster-art-column,
html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList .monster-icon {
  grid-column: 1 !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
}

html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList .monster-art-column > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList .monster-card-text,
html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList > .monster-btn > span:last-child {
  grid-column: 2 !important;
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-align: left !important;
}

html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList .monster-card-text b,
html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList > .monster-btn > span:last-child b {
  display: block !important;
  overflow: hidden !important;
  color: #efffff !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList .monster-card-text small,
html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList > .monster-btn > span:last-child small {
  display: -webkit-box !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  color: #9bb9bf !important;
  font-size: 8.5px !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList em,
html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList > .synergy-box {
  display: none !important;
}

html[data-mobile="true"] body #game-shell .control-panel-right {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  z-index: 120 !important;
  width: min(92vw, 430px) !important;
  min-width: 0 !important;
  max-width: 430px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 10px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 0 !important;
  border-left: 1px solid rgba(99, 222, 232, .32) !important;
  border-radius: 14px 0 0 14px !important;
  background: linear-gradient(155deg, rgba(10, 35, 42, .995), rgba(3, 13, 17, .995)) !important;
  box-shadow: -16px 0 38px rgba(0, 0, 0, .58) !important;
  transform: translateX(105%);
  transition: transform .22s ease;
  will-change: transform;
}

html[data-mobile="true"] body.mobile-selection-open #game-shell .control-panel-right {
  transform: translateX(0);
}

html[data-mobile="true"] body #game-shell .control-panel-right > .right-panel-title {
  display: none !important;
}

html[data-mobile="true"] body #game-shell .mobile-selection-head {
  flex: 0 0 auto !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 0 7px !important;
  border-bottom: 1px solid rgba(103, 212, 223, .2) !important;
}

html[data-mobile="true"] body #game-shell .mobile-selection-head h2 {
  margin: 0 !important;
  color: #eaffff !important;
  font-size: 19px !important;
}

html[data-mobile="true"] body #game-shell .mobile-selection-head button,
html[data-mobile="true"] .mobile-game-menu-head button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  font-size: 20px !important;
  border-radius: 10px !important;
}

html[data-mobile="true"] body #game-shell .control-panel-right > #selectionPanel {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html[data-mobile="true"] body #game-shell #selectionText {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 8px 2px 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-mobile="true"] body #game-shell #selectionText,
html[data-mobile="true"] body #game-shell #selectionText p,
html[data-mobile="true"] body #game-shell #selectionText span,
html[data-mobile="true"] body #game-shell #selectionText small {
  font-size: 12px !important;
  line-height: 1.3 !important;
}

html[data-mobile="true"] body #game-shell #selectionText b,
html[data-mobile="true"] body #game-shell #selectionText strong {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

html[data-mobile="true"] body #game-shell #selectionPanel > .selection-actions {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 7px 0 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
  border-top: 1px solid rgba(103, 212, 223, .2) !important;
  background: transparent !important;
}

html[data-mobile="true"] body #game-shell #selectionPanel > .selection-actions > button,
html[data-mobile="true"] body #game-shell #selectionText button {
  min-height: 44px !important;
  font-size: 12px !important;
}

/* ---------- Mobile slide-out menu ---------- */

html[data-mobile="true"] .mobile-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: block;
  visibility: hidden;
  opacity: 0;
  background: rgba(0, 5, 7, .7);
  transition: opacity .18s ease, visibility .18s ease;
}

html[data-mobile="true"] .mobile-drawer-scrim.open {
  visibility: visible;
  opacity: 1;
}

html[data-mobile="true"] .mobile-game-menu {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 130;
  box-sizing: border-box;
  width: min(88vw, 390px);
  height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid rgba(103, 221, 231, .32);
  border-radius: 16px 0 0 16px;
  background: linear-gradient(150deg, rgba(10, 37, 44, .998), rgba(2, 11, 14, .998));
  box-shadow: -18px 0 45px rgba(0, 0, 0, .62);
  transform: translateX(105%);
  transition: transform .22s ease;
}

html[data-mobile="true"] body.mobile-menu-open .mobile-game-menu {
  transform: translateX(0);
}

html[data-mobile="true"] .mobile-game-menu-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(103, 212, 223, .2);
}

html[data-mobile="true"] .mobile-game-menu-head div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

html[data-mobile="true"] .mobile-game-menu-head small {
  color: #68cbd3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

html[data-mobile="true"] .mobile-game-menu-head strong {
  color: #efffff;
  font-size: 21px;
}

html[data-mobile="true"] .mobile-game-menu-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
}

html[data-mobile="true"] .mobile-game-menu-grid button {
  min-width: 0;
  min-height: 52px;
  padding: 9px 7px;
  color: #dffcff;
  font-size: 12px;
  font-weight: 750;
  border: 1px solid rgba(103, 214, 224, .23);
  border-radius: 10px;
  background: rgba(15, 57, 65, .64);
}

html[data-mobile="true"] .mobile-game-menu-grid .mobile-menu-danger {
  color: #ffd4d4;
  border-color: rgba(232, 111, 111, .3);
  background: rgba(91, 30, 34, .48);
}

/* ---------- Touch-friendly canvas overlays ---------- */

html[data-mobile="true"] #game-shell .enemy-hover-tooltip {
  display: none !important;
}

html[data-mobile="true"] #game-shell .monster-target-tooltip {
  position: absolute !important;
  inset: auto 8px 8px 8px !important;
  width: auto !important;
  max-width: 410px !important;
  margin: 0 auto !important;
  padding: 9px !important;
}

html[data-mobile="true"] #game-shell .monster-target-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

html[data-mobile="true"] #game-shell .monster-target-btn {
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 4px !important;
  font-size: 9px !important;
}

html[data-mobile="true"] #game-shell .boss-hud,
html[data-mobile="true"] #game-shell .endgame-hud {
  max-width: calc(100% - 12px) !important;
  font-size: 11px !important;
}

/* ---------- Start screen and full-screen dialogs ---------- */

html[data-mobile="true"] body > .overlay {
  box-sizing: border-box !important;
  width: 100dvw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
}

html[data-mobile="true"] body > .overlay > .modal {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-overflow-scrolling: touch;
}

html[data-mobile="true"] #startOverlay > .start-dashboard {
  display: block !important;
  background: linear-gradient(160deg, rgba(8, 28, 34, .99), rgba(2, 9, 12, .995)) !important;
}

/* The start screen has several late desktop owners with ID-heavy selectors.
   This explicit mobile owner is kept local to the phone marker. */
html[data-mobile="true"] body #startOverlay.overlay > .modal.start-dashboard {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100dvw !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
}

html[data-mobile="true"] #startOverlay .start-dashboard-head {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html[data-mobile="true"] #startOverlay .start-title-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 5px 9px !important;
}

html[data-mobile="true"] #startOverlay .start-title-row h1 {
  font-size: 26px !important;
}

html[data-mobile="true"] #startOverlay .start-title-row p,
html[data-mobile="true"] #startOverlay .start-profile-summary {
  font-size: 11px !important;
}

html[data-mobile="true"] #startOverlay .start-title-divider {
  display: none !important;
}

html[data-mobile="true"] #startOverlay .start-map-section,
html[data-mobile="true"] #startOverlay .start-team-section,
html[data-mobile="true"] #startOverlay .start-monster-section,
html[data-mobile="true"] #startOverlay .start-side-rail,
html[data-mobile="true"] #startOverlay .start-lower-grid,
html[data-mobile="true"] #startOverlay .start-loadout-stack {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 10px !important;
}

html[data-mobile="true"] #startOverlay .start-lower-grid {
  display: block !important;
}

html[data-mobile="true"] #startOverlay .start-side-rail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
}

html[data-mobile="true"] #startOverlay .start-side-rail > * {
  min-width: 0 !important;
  width: auto !important;
}

html[data-mobile="true"] #startOverlay .start-section-head {
  min-height: 0 !important;
  margin-bottom: 7px !important;
  gap: 6px !important;
}

html[data-mobile="true"] #startOverlay .start-section-head h2,
html[data-mobile="true"] #startOverlay .start-rail-head h3 {
  font-size: 17px !important;
}

html[data-mobile="true"] #startOverlay .start-section-head span,
html[data-mobile="true"] #startOverlay .start-section-head p,
html[data-mobile="true"] #startOverlay .start-section-head small {
  font-size: 10.5px !important;
}

html[data-mobile="true"] #startOverlay #mapGrid,
html[data-mobile="true"] #startOverlay .map-grid {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  overflow: visible !important;
}

html[data-mobile="true"] #startOverlay #mapGrid .map-card {
  min-width: 0 !important;
  min-height: 134px !important;
  height: 134px !important;
}

html[data-mobile="true"] #startOverlay #mapGrid .map-hover-intel {
  display: none !important;
}

html[data-mobile="true"] #startOverlay #loadoutSlots,
html[data-mobile="true"] #startOverlay .loadout-slots,
html[data-mobile="true"] #startOverlay #loadoutGrid,
html[data-mobile="true"] #startOverlay .loadout-grid {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  overflow: visible !important;
}

html[data-mobile="true"] #startOverlay button,
html[data-mobile="true"] body > .overlay button {
  min-height: 42px;
}

html[data-mobile="true"] #startOverlay .start-mode-extras {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}

html[data-mobile="true"] #startOverlay .start-mode-extras > button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  font-size: 11px !important;
}

html[data-mobile="true"] body > .overlay .modal-head {
  position: sticky !important;
  top: calc(-1 * max(10px, env(safe-area-inset-top))) !important;
  z-index: 15 !important;
  margin: 0 0 10px !important;
  padding: 8px !important;
  min-height: 52px !important;
  background: rgba(5, 22, 27, .97) !important;
  backdrop-filter: blur(10px);
}

html[data-mobile="true"] body > .overlay .modal-head h1,
html[data-mobile="true"] body > .overlay .modal-head h2 {
  font-size: 21px !important;
}

html[data-mobile="true"] body > .overlay .modal-head > button,
html[data-mobile="true"] body > .overlay button[aria-label*="schließen"],
html[data-mobile="true"] body > .overlay button[aria-label*="Schließen"] {
  min-width: 44px !important;
  width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
}

html[data-mobile="true"] #achievementsOverlay .achievement-grid,
html[data-mobile="true"] #statsOverlay .stats-grid,
html[data-mobile="true"] #saveManagerOverlay .save-manager-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-mobile="true"] #bestiaryOverlay .bestiary-modal,
html[data-mobile="true"] #shopOverlay .essence-shop-modal,
html[data-mobile="true"] #endOverlay .end-summary-modal,
html[data-mobile="true"] #achievementsOverlay .achievements-modal {
  display: block !important;
}

html[data-mobile="true"] #bestiaryOverlay .bestiary2-layout,
html[data-mobile="true"] #bestiaryOverlay .bestiary-layout,
html[data-mobile="true"] #shopOverlay .shop-layout,
html[data-mobile="true"] #endOverlay .end-summary-layout {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Browser keyboards shrink visualViewport; keep account controls reachable. */
html[data-mobile="true"] #accountGateOverlay .account-gate-modal,
html[data-mobile="true"] #saveManagerOverlay .save-manager-modal {
  padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
}

@media (max-height: 390px) {
  html[data-mobile="true"] body {
    --mobile-topbar-height: 86px;
    --mobile-roster-height: 82px;
  }

  html[data-mobile="true"] #game-shell .mobile-hud-actions {
    width: 138px !important;
  }

  html[data-mobile="true"] #game-shell .game-topbar__play {
    right: 146px !important;
  }

  html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList > .monster-btn.ingame-slot {
    height: 67px !important;
    min-height: 67px !important;
    max-height: 67px !important;
  }

  html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList .monster-art-column,
  html[data-mobile="true"] body #game-shell .monster-panel-left #monsterList .monster-icon {
    height: 57px !important;
    min-height: 57px !important;
    max-height: 57px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-mobile="true"] body #game-shell .control-panel-right,
  html[data-mobile="true"] .mobile-game-menu,
  html[data-mobile="true"] .mobile-drawer-scrim {
    transition: none !important;
  }
}

/* ---------- Final phone geometry owner ----------
   The historic desktop cascade intentionally uses very specific !important
   selectors. These equally explicit rules are last and phone-gated. */

html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > .canvas-wrap {
  position: absolute !important;
  inset: 0 0 var(--mobile-roster-height) 0 !important;
  width: auto !important;
  height: auto !important;
}

html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > .monster-panel-left {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  width: auto !important;
  max-width: none !important;
  height: var(--mobile-roster-height) !important;
  min-height: 0 !important;
  display: block !important;
}

html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > .monster-panel-left > h2,
html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > .monster-panel-left > p,
html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > .monster-panel-left > #inGameTeamSummary {
  display: none !important;
}

html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > .monster-panel-left > #monsterList {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  height: calc(var(--mobile-roster-height) - 10px) !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > .monster-panel-left > #monsterList > .monster-btn.ingame-slot {
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: calc(var(--mobile-roster-height) - 16px) !important;
  min-height: 0 !important;
  max-height: calc(var(--mobile-roster-height) - 16px) !important;
  align-self: start !important;
}

html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > .monster-panel-left > #monsterList > .monster-btn.ingame-slot .monster-art-column,
html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > .monster-panel-left > #monsterList > .monster-btn.ingame-slot .monster-icon {
  height: calc(var(--mobile-roster-height) - 24px) !important;
  min-height: 0 !important;
  max-height: calc(var(--mobile-roster-height) - 24px) !important;
}

html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > .control-panel-right {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: min(92vw, 430px) !important;
  max-width: 430px !important;
  height: 100% !important;
  transform: translateX(105%) !important;
}

html[data-mobile="true"] body.mobile-selection-open #game-shell > .game-layout.three-column-layout > .control-panel-right {
  transform: translateX(0) !important;
}

/* Readable phone cards and deliberate scroll containers. */
html[data-mobile="true"] #startOverlay .start-dashboard-head {
  display: block !important;
}
html[data-mobile="true"] #startOverlay .start-title-row p {
  white-space: normal !important;
}
html[data-mobile="true"] #startOverlay #profileSummary {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 8px !important;
  font-size: 12px !important;
  text-align: left !important;
}
html[data-mobile="true"] #startOverlay #mapGrid {
  display: flex !important;
  overflow-x: auto !important;
  gap: 10px !important;
  padding-bottom: 8px !important;
}
html[data-mobile="true"] #startOverlay #mapGrid .map-card {
  flex: 0 0 230px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 250px !important;
  padding: 8px !important;
  gap: 6px !important;
}
html[data-mobile="true"] #startOverlay #mapGrid .map-preview {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 88px !important;
  min-height: 88px !important;
  flex: 0 0 88px !important;
}
html[data-mobile="true"] #startOverlay #mapGrid .map-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html[data-mobile="true"] #startOverlay #mapGrid .map-card-copy {
  position: static !important;
  display: block !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html[data-mobile="true"] #startOverlay #mapGrid .map-card-copy b {font-size: 16px !important;}
html[data-mobile="true"] #startOverlay #mapGrid .map-card-copy small,
html[data-mobile="true"] #startOverlay #mapGrid .map-card-copy span {font-size: 12px !important;line-height: 1.25 !important;}
html[data-mobile="true"] #startOverlay #mapGrid .map-launch-hint {
  position: static !important;
  margin-top: auto !important;
  padding: 7px !important;
  font-size: 13px !important;
  transform: none !important;
}
html[data-mobile="true"] #startOverlay #mapGrid .map-card > em {position: static !important;font-size: 12px !important;}
html[data-mobile="true"] #startOverlay .start-lower-grid,
html[data-mobile="true"] #startOverlay .start-loadout-stack {overflow: visible !important;}
html[data-mobile="true"] #startOverlay .team-toolbar-row {display: block !important;height: auto !important;}
html[data-mobile="true"] #startOverlay .team-preset-bar {display: flex !important;flex-wrap: wrap !important;width: 100% !important;}
html[data-mobile="true"] #startOverlay .leader-summary {width: 100% !important;max-width: none !important;margin: 8px 0 !important;}

html[data-mobile="true"] #game-shell #monsterList .monster-card-text {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}
html[data-mobile="true"] #game-shell #monsterList .monster-card-text b {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-size: 12px !important;
}
html[data-mobile="true"] #game-shell #monsterList .monster-card-text small {font-size: 10px !important;}
html[data-mobile="true"] #game-shell .game-topbar__wave {padding-right: 210px !important;}
html[data-mobile="true"] #game-shell .game-topbar__play {left: auto !important;width: 200px !important;right: 162px !important;}
html[data-mobile="true"] #game-shell .game-topbar__wave > #autoWaveBtn {display: none !important;}
html[data-mobile="true"] #game-shell .game-topbar__wave > #waveBtn {min-height: 44px !important;height: 44px !important;}
html[data-mobile="true"] #game-shell .game-topbar__play > button {min-height: 44px !important;height: 44px !important;}
html[data-mobile="true"] body {--mobile-topbar-height: 96px;}
html[data-mobile="true"] #game-shell .control-panel-right {z-index: 120 !important;}
html[data-mobile="true"] .mobile-drawer-scrim {z-index: 10 !important;}
html[data-mobile="true"] .mobile-game-menu {z-index: 45 !important;}
html[data-mobile="true"] #game-shell #selectionText > * {max-width: 100% !important;}
html[data-mobile="true"] #game-shell #selectionText .rpanel-empty {min-height: 90px !important;padding: 16px !important;}
html[data-mobile="true"] #game-shell #selectionPanel {min-height: 0 !important;}
html[data-mobile="true"] #accountGateOverlay {overflow-y: auto !important;padding: 10px !important;align-items: flex-start !important;}
html[data-mobile="true"] #accountGateOverlay .account-gate-modal {margin: auto !important;width: min(100%,600px) !important;padding: 18px !important;}
html[data-mobile="true"] #accountGateOverlay input {font-size: 16px !important;}

html[data-mobile="true"] body > .overlay > .modal {display: block !important;}
html[data-mobile="true"] body > .overlay .modal-head {height: auto !important;min-width: 0 !important;flex-wrap: wrap !important;}
html[data-mobile="true"] body > .overlay .modal-head > div {min-width: 0 !important;flex: 1 !important;}
html[data-mobile="true"] body > .overlay .modal-head p {font-size: 12px !important;}
html[data-mobile="true"] #shopGrid {display: block !important;height: auto !important;overflow: visible !important;}
html[data-mobile="true"] #shopGrid .shop-branch {height: auto !important;min-height: 0 !important;margin-bottom: 12px !important;overflow: visible !important;}
html[data-mobile="true"] #shopGrid .shop-branch-cards {grid-template-columns: repeat(2,minmax(0,1fr)) !important;height: auto !important;}
html[data-mobile="true"] #shopGrid .shop-node {height: auto !important;min-height: 140px !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-topbar {display: flex !important;height: auto !important;min-height: 55px !important;gap: 12px !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-brand,
html[data-mobile="true"] #bestiaryOverlay .bx-topquote em {display: none !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-heading {flex: 1 !important;}
html[data-mobile="true"] #bestiaryContent {display: block !important;height: auto !important;overflow: visible !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-layout {display: block !important;height: auto !important;overflow: visible !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-list {display: flex !important;flex-direction: row !important;overflow-x: auto !important;height: 100px !important;min-height: 0 !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-list-card {flex: 0 0 180px !important;width: 180px !important;min-height: 78px !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-detail,
html[data-mobile="true"] #bestiaryOverlay .bx-creature-detail {height: auto !important;overflow: visible !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-hero {grid-template-columns: 160px minmax(0,1fr) !important;height: auto !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-development-row,
html[data-mobile="true"] #bestiaryOverlay .bx-bottom,
html[data-mobile="true"] #bestiaryOverlay .bx-upgrade-layout {display: block !important;height: auto !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-panel {margin-bottom: 10px !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-hero-picture {height: 180px !important;min-height: 0 !important;}
html[data-mobile="true"] #game-shell .game-topbar__play > button {flex: 0 0 44px !important;max-width: 44px !important;}
html[data-mobile="true"] #game-shell #selectionText .rpanel-hero {display: grid !important;grid-template-columns: 76px minmax(0,1fr) !important;min-height: 0 !important;height: auto !important;gap: 8px !important;}
html[data-mobile="true"] #game-shell #selectionText .rpanel-art {width: 76px !important;height: 76px !important;min-height: 0 !important;grid-column: 1 !important;grid-row: 1 !important;}
html[data-mobile="true"] #game-shell #selectionText .rpanel-identity {grid-column: 2 !important;grid-row: 1 !important;min-height: 0 !important;}
html[data-mobile="true"] #game-shell #selectionText .rpanel-identity h3 {font-size: 18px !important;margin: 0 0 4px !important;}
html[data-mobile="true"] #game-shell #selectionText .rpanel-card {flex-shrink: 0 !important;}
html[data-mobile="true"] #game-shell #selectionPanel > .selection-actions > button {display: block !important;}
html[data-mobile="true"] #game-shell #selectionPanel > .selection-actions > button.hidden {display: none !important;}
html[data-mobile="true"] .mobile-targets {display: flex !important;gap: 3px !important;padding-top: 5px !important;flex: 0 0 auto !important;}
html[data-mobile="true"] .mobile-targets button {flex: 1 !important;min-width: 0 !important;min-height: 44px !important;font-size: 10px !important;padding: 3px !important;}
html[data-mobile="true"] .mobile-targets[hidden] {display: none !important;}
html[data-mobile="true"] #game-shell #monsterTargetTooltip {display: none !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-shell {display: block !important;height: auto !important;overflow: visible !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-index {height: auto !important;min-height: 0 !important;margin-bottom: 10px !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-hero-main,
html[data-mobile="true"] #bestiaryOverlay .bx-hero-personality,
html[data-mobile="true"] #bestiaryOverlay .bx-hero-bottom {display: block !important;height: auto !important;min-height: 0 !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-personality-tags {display: flex !important;flex-wrap: wrap !important;min-width: 0 !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-personality-tags span {width: auto !important;min-width: 0 !important;white-space: normal !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-stats,
html[data-mobile="true"] #bestiaryOverlay .bx-facts {display: flex !important;flex-wrap: wrap !important;gap: 6px !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-stats > span,
html[data-mobile="true"] #bestiaryOverlay .bx-facts > span {flex: 1 1 80px !important;min-width: 0 !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-evo-grid,
html[data-mobile="true"] #bestiaryOverlay .bx-imprint-grid {height: auto !important;min-height: 0 !important;}
html[data-mobile="true"] #bestiaryOverlay .bx-panel {height: auto !important;min-height: 0 !important;}
html[data-mobile="true"] #shopSummary {display: flex !important;flex-wrap: wrap !important;height: auto !important;gap: 12px !important;padding: 12px !important;}
html[data-mobile="true"] #shopSummary > * {min-width: 110px !important;flex: 1 1 110px !important;border: 0 !important;padding: 4px !important;}
html[data-mobile="true"] body #game-shell > .game-layout.three-column-layout > #mobileSelectionDrawer {
  position: fixed !important;top: 0 !important;bottom: 0 !important;height: 100dvh !important;z-index: 45 !important;
}
html[data-mobile="true"] #game-shell #selectionPanel {padding: 0 !important;gap: 4px !important;}
html[data-mobile="true"] #game-shell #selectionPanel > .selection-actions {height: 52px !important;min-height: 52px !important;max-height: 52px !important;margin: 0 !important;}
html[data-mobile="true"] #game-shell #selectionPanel > .selection-actions > button {grid-column: auto !important;width: 100% !important;max-width: none !important;margin: 0 !important;}
html[data-mobile="true"] #game-shell #selectionText {display: block !important;width: 100% !important;margin: 0 !important;}
html[data-mobile="true"] #game-shell #selectionText .rpanel-card {margin-bottom: 8px !important;}
html[data-mobile="true"] body .hidden {display: none !important;}
}