/* ============================================================================ Окно ставки NFT-подарками — Plinko. Тот же золото-чёрный дизайн, что в nft-bet-modal.css, но разметка у Plinko своя (.plinko-modal-card / .plinko-nft-modal-card), а css грузится не ленивой группой, а из . Поэтому файл отдельный: подключать его нужно в index.html СРАЗУ ПОСЛЕ plinko.nft.css, иначе старые правила перебьют. ========================================================================= */ #plinkoNftModal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; /* Окно висит в воздухе: отступ со всех четырёх сторон вместо шторки снизу. */ padding: calc(18px + var(--safe-top, 0px)) 16px calc(18px + var(--safe-bottom, 0px)); background: rgba(2, 2, 3, .72); -webkit-backdrop-filter: blur(6px) saturate(115%); backdrop-filter: blur(6px) saturate(115%); animation: nftbet-fade .16s ease-out; } #plinkoNftModal.hidden { display: none !important; } #plinkoNftModal .plinko-modal-backdrop { position: absolute; inset: 0; } #plinkoNftModal .plinko-modal-card { position: relative; width: min(100%, 440px); min-height: 0; max-height: 100%; border-radius: 20px; padding: 16px 15px 15px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(24, 20, 12, .98) 0%, rgba(12, 10, 7, .99) 46%, rgba(7, 6, 4, 1) 100%); border: 1px solid rgba(226, 196, 121, .42); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 26px 60px rgba(0, 0, 0, .66), 0 0 46px rgba(180, 140, 60, .12); color: #f6efdd; animation: nftbet-pop .18s cubic-bezier(.2, .9, .3, 1.1); } #plinkoNftModal .plinko-modal-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(247, 233, 187, .78), transparent); pointer-events: none; } #plinkoNftModal .plinko-modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0; padding-bottom: 11px; border-bottom: 1px solid rgba(226, 196, 121, .16); } #plinkoNftModal .plinko-modal-title { font-size: 17px; font-weight: 900; letter-spacing: .2px; background: #d6b871; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #d6b871; } #plinkoNftModal .plinko-modal-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; border: 1px solid rgba(226, 196, 121, .3); background: linear-gradient(180deg, rgba(226, 196, 121, .18), rgba(156, 117, 48, .10)); color: #e6cf95; font-size: 15px; font-weight: 900; display: grid; place-items: center; line-height: 1; } #plinkoNftModal .plinko-modal-close:active { transform: scale(.94); } #plinkoNftModal .plinko-nft-inventory-list { flex: 1 1 auto; min-height: 0; padding: 2px 2px 4px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } #plinkoNftModal .plinko-nft-inventory-list::-webkit-scrollbar { display: none; } #plinkoNftModal .plinko-nft-modal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; width: 100%; } #plinkoNftModal .plinko-nft-modal-card, #plinkoNftModal .plinko-nft-empty { position: relative; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border-radius: 14px; border: 1px solid rgba(226, 196, 121, .18); background: linear-gradient(180deg, rgba(34, 28, 17, .82), rgba(15, 12, 8, .94)); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255, 245, 214, .06); transition: transform .12s ease, border-color .12s ease; } #plinkoNftModal .plinko-nft-modal-card img { width: 100%; height: 100%; object-fit: cover; display: block; } #plinkoNftModal .plinko-nft-modal-card.active { outline: none !important; border-color: rgba(247, 233, 187, .92) !important; box-shadow: inset 0 0 0 2px rgba(226, 196, 121, .92), 0 0 18px rgba(200, 158, 74, .3) !important; } #plinkoNftModal .plinko-nft-price-badge { position: absolute; left: 5px; right: 5px; bottom: 5px; min-height: 20px; padding: 0 6px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(8, 7, 4, .84), rgba(4, 3, 2, .92)); border: 1px solid rgba(226, 196, 121, .2); color: #f0e3c0 !important; font-size: 10px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #plinkoNftModal .plinko-nft-pick-badge { position: absolute; right: 5px; top: 5px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: #d6b871; border: 1px solid rgba(255, 245, 214, .5); color: #2a1e06; font-size: 11px; font-weight: 900; line-height: 1; } #plinkoNftModal .plinko-modal-actions { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(226, 196, 121, .16); } #plinkoNftModal .plinko-secondary-btn, #plinkoNftModal .plinko-apply-btn { width: 100%; height: 44px; border-radius: 13px; font-size: 15px; font-weight: 900; } #plinkoNftModal .plinko-secondary-btn { background: linear-gradient(180deg, rgba(38, 32, 20, .72), rgba(16, 13, 8, .86)); border: 1px solid rgba(226, 196, 121, .28); color: #ddcda2; box-shadow: none; } #plinkoNftModal .plinko-apply-btn { background: #d6b871; border: 1px solid rgba(255, 233, 175, .55); color: #3a2a08; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34); text-shadow: none; } #plinkoNftModal .plinko-apply-btn:disabled { opacity: .45; } /* Анимации продублированы: файл может грузиться без nft-bet-modal.css. */ @keyframes nftbet-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes nftbet-pop { from { opacity: 0; transform: translateY(10px) scale(.975); } to { opacity: 1; transform: none; } } @media (max-width: 380px) { #plinkoNftModal { padding: calc(14px + var(--safe-top, 0px)) 12px calc(14px + var(--safe-bottom, 0px)); } #plinkoNftModal .plinko-modal-card { padding: 14px 12px 13px; } } @media (prefers-reduced-motion: reduce) { #plinkoNftModal, #plinkoNftModal .plinko-modal-card { animation: none; } }