/* V1.8.39 — selected Tag-Team room deck and reliable large iPhone Mana Curve. */

/* The in-room mode is a deck selector, not another route named Tag-Team. */
.tag-team-mode-toolbar #tagTeamRoomMode {
  min-width: 108px;
}
.tag-team-deck-tabs {
  justify-content: flex-end;
  align-items: center;
}
.tag-team-deck-tabs .selected-room-deck {
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 32%, transparent) !important;
}
.tag-team-deck-tabs .tag-team-deck-flash {
  animation: pftcg-room-deck-highlight .65s ease both;
}
.tag-team-selected-deck-view {
  min-width: 0;
}
@keyframes pftcg-room-deck-highlight {
  0%, 100% { transform: none; }
  45% { transform: translateY(-2px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 42%, transparent); }
}

/* iOS needs an explicit scrolling viewport and fixed-size flex columns. Grid minmax
   rules can be compressed by WebKit inside the mobile deck shell, making cards tiny. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-device-width: 1200px) {
  html.pftcg-ios body.deck-route .deck-editor,
  html.pftcg-ios body.deck-route #deckGrid,
  html.mobile-device-layout body.deck-route .deck-editor,
  html.mobile-device-layout body.deck-route #deckGrid {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html.pftcg-ios body.deck-route #deckGrid.mana-curve-view,
  html.mobile-device-layout body.deck-route #deckGrid.mana-curve-view {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  html.pftcg-ios body.deck-route .mana-curve-scroll,
  html.mobile-device-layout body.deck-route .mana-curve-scroll {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 12px 28px 2px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity !important;
    scrollbar-gutter: auto !important;
    contain: none !important;
  }

  html.pftcg-ios body.deck-route .mana-curve,
  html.mobile-device-layout body.deck-route .mana-curve {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: 0 12px 0 0 !important;
  }

  html.pftcg-ios body.deck-route .mana-curve-column,
  html.mobile-device-layout body.deck-route .mana-curve-column {
    flex: 0 0 184px !important;
    box-sizing: border-box !important;
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    padding: 9px !important;
    scroll-snap-align: start !important;
  }

  html.pftcg-ios body.deck-route .mana-curve-stack,
  html.mobile-device-layout body.deck-route .mana-curve-stack {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 244px !important;
    align-items: stretch !important;
  }

  html.pftcg-ios body.deck-route .mana-curve-card,
  html.mobile-device-layout body.deck-route .mana-curve-card {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 907 / 1306 !important;
    flex: 0 0 auto !important;
  }

  html.pftcg-ios body.deck-route .mana-curve-card img,
  html.mobile-device-layout body.deck-route .mana-curve-card img {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  html.pftcg-ios body.deck-route .mana-curve-card + .mana-curve-card,
  html.mobile-device-layout body.deck-route .mana-curve-card + .mana-curve-card {
    margin-top: -88% !important;
  }

  html.pftcg-ios body.deck-route .mana-curve-quantity,
  html.mobile-device-layout body.deck-route .mana-curve-quantity {
    top: 7px !important;
    right: 7px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 430px) {
  html.pftcg-ios body.deck-route .mana-curve-column,
  html.mobile-device-layout body.deck-route .mana-curve-column {
    flex-basis: 178px !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
  }
}