/* RF-AVALON Market V61.0.100 — mobile tooltip + market heading polish. UI-only. No SQL, GP, inventory, purchase, reserve or settlement logic changes. */ @media (max-width: 760px) { /* Header rules: more deliberate cards with proper-size icons. The icon is absolutely positioned so text can wrap naturally. */ .item-market-heading .market-rule.market-offline-rule-v93, .item-market-heading .item-duration-rule { position: relative !important; display: block !important; width: 100% !important; min-height: 58px !important; margin: 10px 0 0 !important; padding: 14px 14px 13px 60px !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: #e0e5ee !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.42 !important; text-align: left !important; box-shadow: inset 0 1px rgba(255,255,255,.025), 0 5px 15px rgba(4,7,13,.08) !important; } .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; 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; } .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: 19px !important; padding-bottom: 1px !important; } .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; } /* Mobile tooltip must belong to the viewport, not to the tapped inventory slot. This fixes long shield cards whose top/title could be pushed above the screen. */ html.v61-touch .equipment-slot.v61-tooltip-open > .item-tooltip { position: fixed !important; z-index: 12000 !important; left: 12px !important; right: 12px !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 - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; margin: 0 !important; padding: 14px 14px 16px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; transform: none !important; border-radius: 8px !important; box-shadow: 0 18px 60px rgba(0,0,0,.62), 0 0 0 1px rgba(180,198,219,.08) !important; } /* Keep title and icon visible at the top of every long tooltip. */ html.v61-touch .equipment-slot.v61-tooltip-open > .item-tooltip .item-tooltip-title { min-height: 68px !important; padding: 2px 78px 10px 0 !important; align-content: start !important; } html.v61-touch .equipment-slot.v61-tooltip-open > .item-tooltip .item-tooltip-art { position: absolute !important; top: 13px !important; right: 13px !important; width: 64px !important; min-width: 64px !important; height: 64px !important; min-height: 64px !important; } html.v61-touch .equipment-slot.v61-tooltip-open > .item-tooltip > small { padding-right: 0 !important; } /* Long shield/armor rows need a stable mobile two-column grid. */ html.v61-touch .item-tooltip .item-game-strict-v60 .item-game-special-grid-v59 > span, html.v61-touch .item-tooltip .item-game-effects-v60, html.v61-touch .item-tooltip .item-game-info-v60 > b > span { grid-template-columns: minmax(118px, 36%) minmax(0, 1fr) !important; gap: 8px !important; } html.v61-touch .item-tooltip .item-game-strict-v60 .item-game-special-grid-v59 i, html.v61-touch .item-tooltip .item-game-effects-v60 > i, html.v61-touch .item-tooltip .item-game-info-v60 em { white-space: normal !important; overflow-wrap: anywhere !important; } html.v61-touch .item-tooltip .item-game-strict-v60 .item-game-special-grid-v59 b, html.v61-touch .item-tooltip .item-game-effects-v60 > b, html.v61-touch .item-tooltip .item-game-info-v60 strong { min-width: 0 !important; overflow-wrap: anywhere !important; } /* A small close hint at the bottom; tapping anywhere on the card closes it. */ html.v61-touch .equipment-slot.v61-tooltip-open > .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: 390px) { .item-market-heading .market-rule.market-offline-rule-v93, .item-market-heading .item-duration-rule { padding: 12px 12px 12px 54px !important; font-size: 13px !important; } .item-market-heading .market-rule.market-offline-rule-v93::before, .item-market-heading .item-duration-rule::before { left: 12px !important; width: 30px !important; height: 30px !important; } html.v61-touch .equipment-slot.v61-tooltip-open > .item-tooltip { left: 8px !important; right: 8px !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100dvh - 18px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; padding: 12px 12px 14px !important; } html.v61-touch .item-tooltip .item-game-strict-v60 .item-game-special-grid-v59 > span, html.v61-touch .item-tooltip .item-game-effects-v60, html.v61-touch .item-tooltip .item-game-info-v60 > b > span { grid-template-columns: minmax(108px, 35%) minmax(0, 1fr) !important; gap: 7px !important; } }