/* RF-AVALON Market V61.0.102 — mobile rule cards + touch tooltip cleanup.
   UI-only. Text values stay inline; tooltip open/close is handled by market-v61.js. */

@media (max-width: 760px) {
  /* Do not use grid/flex children for these text nodes: it separated <strong>
     values such as "вне игры" and "30 дней" into their own row. Keep one
     normal inline text flow and reserve the icon area with left padding. */
  .page-heading:not(.item-market-heading) .market-rule,
  .item-market-heading .market-rule.market-offline-rule-v93,
  .item-market-heading .item-duration-rule {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 10px 0 0 !important;
    padding: 15px 14px 15px 58px !important;
    border: 1px solid rgba(240, 163, 48, .48) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(90deg, rgba(240,163,48,.10), rgba(240,163,48,.045) 58%, rgba(240,163,48,.025)),
      #242a39 !important;
    color: #e7edf6 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.025),
      0 5px 15px rgba(4,7,13,.08) !important;
  }

  .page-heading:not(.item-market-heading) .market-rule::before,
  .item-market-heading .market-rule.market-offline-rule-v93::before,
  .item-market-heading .item-duration-rule::before {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,181,60,.62) !important;
    border-radius: 50% !important;
    background: rgba(240,163,48,.10) !important;
    color: #ffb43b !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
  }

  .page-heading:not(.item-market-heading) .market-rule::before {
    content: "GP" !important;
    font-size: 11px !important;
    letter-spacing: -.02em !important;
  }

  .item-market-heading .market-rule.market-offline-rule-v93::before {
    content: "!" !important;
    font-size: 18px !important;
  }

  .item-market-heading .item-duration-rule::before {
    content: "◷" !important;
    font-size: 18px !important;
    padding-bottom: 1px !important;
  }

  .page-heading:not(.item-market-heading) .market-rule strong,
  .item-market-heading .market-rule.market-offline-rule-v93 strong,
  .item-market-heading .item-duration-rule strong {
    display: inline !important;
    color: #ffc45d !important;
    font-size: inherit !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  /* V100 made long item cards viewport-fixed. Keep that geometry, but reset
     each tooltip to its top on opening so shield titles do not appear clipped. */
  html.v61-touch .equipment-slot.v61-tooltip-open > .item-tooltip {
    position: fixed !important;
    z-index: 12000 !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - 22px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    transform: none !important;
  }
}

@media (max-width: 390px) {
  .page-heading:not(.item-market-heading) .market-rule,
  .item-market-heading .market-rule.market-offline-rule-v93,
  .item-market-heading .item-duration-rule {
    padding: 14px 12px 14px 54px !important;
    font-size: 13px !important;
  }

  .page-heading:not(.item-market-heading) .market-rule::before,
  .item-market-heading .market-rule.market-offline-rule-v93::before,
  .item-market-heading .item-duration-rule::before {
    left: 12px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
  }
}


/* V61.0.103 — item market heading orange tint + calmer large touch cards in sale modal. */
.item-market-heading {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 169, 56, .12), transparent 34%),
    radial-gradient(circle at 0 100%, rgba(255, 113, 28, .09), transparent 36%),
    linear-gradient(135deg, rgba(255, 168, 51, .06), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    #232a3d !important;
  border-color: rgba(255, 169, 56, .18) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.03),
    0 10px 28px rgba(7, 11, 18, .18),
    0 0 0 1px rgba(255, 169, 56, .05) !important;
}

@media (max-width: 760px) {
  /* Use the same warmer hero tint on the item market card as on the character market. */
  .item-market-heading {
    background:
      radial-gradient(circle at 100% 0, rgba(255, 169, 56, .16), transparent 36%),
      radial-gradient(circle at 0 100%, rgba(255, 113, 28, .12), transparent 38%),
      linear-gradient(135deg, rgba(255, 168, 51, .08), transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
      #232a3d !important;
  }

  /* Large item tooltips inside the sale modal should behave like a shorter
     bottom sheet so the title does not ride under the bag tabs. */
  html.v61-touch .item-sale-modal .equipment-slot.v61-tooltip-open > .item-tooltip {
    z-index: 13000 !important;
    padding-top: 14px !important;
    padding-right: 82px !important;
  }

  html.v61-touch .item-sale-modal .equipment-slot.v61-tooltip-open > .item-tooltip .item-tooltip-title {
    min-height: 72px !important;
    padding: 4px 82px 10px 0 !important;
    margin-top: 0 !important;
    align-content: start !important;
  }

  html.v61-touch .item-sale-modal .equipment-slot.v61-tooltip-open > .item-tooltip .item-tooltip-art {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
  }
}


/* V61.0.104 ---------------------------------------------------------------
   1) Public market hero cards must be visually identical.
   2) Touch item details use a BODY-level portal sheet, so inventory tabs and
      stacking contexts can no longer cover/clip long cards.
   3) Character loading/selection in the item-sale wizard is one clean column. */

/* Exactly the same background, border and shadow for BOTH public market heroes. */
.page-heading,
.item-market-heading {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 157, 46, .115), transparent 37%),
    radial-gradient(circle at 0 100%, rgba(255, 106, 24, .075), transparent 40%),
    linear-gradient(135deg, rgba(255, 172, 58, .045), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
    #232a3d !important;
  border-color: rgba(255, 166, 54, .145) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.026),
    0 10px 28px rgba(7,11,18,.17),
    0 0 0 1px rgba(255,166,54,.035) !important;
}

/* The old in-slot touch tooltip is disabled. V104 renders a clone directly
   under BODY as .v61-mobile-tooltip-layer/.v61-mobile-tooltip-sheet. */
html.v61-touch .equipment-slot > .item-tooltip {
  pointer-events: none !important;
}
html.v61-touch .equipment-slot.v61-tooltip-open > .item-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.v61-mobile-tooltip-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 30000 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 10px !important;
  background: rgba(4, 7, 12, .34) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
  backdrop-filter: blur(1.5px) !important;
  overscroll-behavior: contain !important;
}

.v61-mobile-tooltip-sheet.item-tooltip {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  width: min(100%, 760px) !important;
  min-width: 0 !important;
  max-width: 760px !important;
  max-height: min(78dvh, 680px) !important;
  margin: 0 !important;
  padding: 15px 14px 15px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  border-radius: 9px !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,.72),
    0 0 0 1px rgba(185,202,222,.09) !important;
}

.v61-mobile-tooltip-sheet.item-tooltip .item-tooltip-title {
  box-sizing: border-box !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 2px 82px 11px 0 !important;
  align-content: start !important;
  overflow: visible !important;
}

.v61-mobile-tooltip-sheet.item-tooltip .item-tooltip-title strong,
.v61-mobile-tooltip-sheet.item-tooltip h3,
.v61-mobile-tooltip-sheet.item-tooltip .item-title {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.v61-mobile-tooltip-sheet.item-tooltip .item-tooltip-art {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
}

.v61-mobile-tooltip-sheet.item-tooltip::after {
  content: "Нажмите на карточку, чтобы закрыть" !important;
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-top: 10px !important;
  padding-top: 9px !important;
  border-top: 1px solid rgba(126,145,169,.18) !important;
  background: none !important;
  color: #6f7d91 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  filter: none !important;
  animation: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  /* Both heroes use the exact same mobile gradient too. */
  .page-heading,
  .item-market-heading {
    background:
      radial-gradient(circle at 100% 0, rgba(255, 157, 46, .13), transparent 37%),
      radial-gradient(circle at 0 100%, rgba(255, 106, 24, .085), transparent 40%),
      linear-gradient(135deg, rgba(255, 172, 58, .055), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
      #232a3d !important;
  }

  .v61-mobile-tooltip-layer {
    padding: 8px !important;
  }

  .v61-mobile-tooltip-sheet.item-tooltip {
    width: 100% !important;
    max-width: none !important;
    max-height: min(76dvh, 650px) !important;
    padding: 14px 13px 14px !important;
  }

  /* Clean character step. No two-column cards and no loading copy floating in
     the upper-left while cards occupy random cells. */
  .item-sale-characters .item-sale-character-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  .item-sale-characters .item-sale-character-list button {
    width: 100% !important;
    min-height: 68px !important;
    margin: 0 !important;
    grid-template-columns: 42px minmax(0,1fr) 24px !important;
  }

  .item-sale-characters .item-sale-loading {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 240px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
    text-align: center !important;
    color: #8d99ad !important;
  }

  .item-sale-characters .item-sale-loading::before {
    content: "";
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border: 2px solid rgba(240,163,48,.22);
    border-top-color: #f0a330;
    border-radius: 50%;
    animation: v104-character-load-spin .8s linear infinite;
  }

  /* Sometimes React places loading copy directly inside the character panel.
     Give it the same centered treatment. */
  .item-sale-characters > .modal-copy,
  .item-sale-character-list > .modal-copy {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    align-self: center !important;
    margin: 24px 12px !important;
    padding: 18px 16px !important;
    border: 1px dashed rgba(121,139,165,.22) !important;
    border-radius: 8px !important;
    background: rgba(18,25,37,.36) !important;
    color: #8d99ad !important;
    text-align: center !important;
  }
}

@keyframes v104-character-load-spin { to { transform: rotate(360deg); } }

@media (max-width: 390px) {
  .v61-mobile-tooltip-sheet.item-tooltip {
    max-height: 75dvh !important;
    padding: 13px 12px 13px !important;
  }
}