/* ───── OFFERTE A PAGAMENTO ───── */
.paysec { display: grid; gap: 14px; }
.paysec > h3.st { margin: 4px 0 0; text-align: center; font-size: clamp(26px, 5vh, 40px); color: var(--gold); -webkit-text-stroke: 6px var(--ink); }
.pay-foot { margin: 0; text-align: center; color: #b9c3ee; font-size: clamp(11px, 2vh, 14px); }

/* offerte uniche: stessa forma dei banner del negozio */
.po { display: grid; grid-template-columns: minmax(180px, 330px) 1fr; gap: 18px; align-items: center; padding: 14px; border: 5px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 rgba(0, 0, 0, .35), inset 0 3px 0 rgba(255, 255, 255, .22); position: relative; overflow: hidden; }
.po.azrael { background: radial-gradient(ellipse at 20% 40%, #a01632, #3a0612 60%, #12020a); }
.po.launch { background: linear-gradient(135deg, #ff9a2b, #b3226b 55%, #3b1580); }
.po.pass1 { background: linear-gradient(135deg, #6a2bc8, #2a1160 60%, #120826); }
.po.welcome { background: linear-gradient(135deg, #1f8f6a, #135a54 55%, #0b2a3d); }
.po.done { filter: saturate(.55) brightness(.8); }
.po-art { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(0, 0, 0, .35); box-shadow: 0 5px 0 rgba(0, 0, 0, .4), inset 0 0 0 3px rgba(0, 0, 0, .5); display: grid; place-items: center; }
.po-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po.azrael .po-img { object-position: 50% 30%; }
.po-rib { position: absolute; left: -34px; top: 14px; transform: rotate(-35deg); width: 150px; text-align: center; padding: 3px 0 4px; font-style: normal; font-family: var(--font); font-size: clamp(11px, 2.1vh, 15px); letter-spacing: 1px; color: #fff; background: linear-gradient(#ff5a4a, #c2182e); border-top: 2px solid #1a0508; border-bottom: 2px solid #1a0508; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.po-rib.g { background: linear-gradient(#8dff7a, #20b83e); }
.po-rib.b { background: linear-gradient(#7cc4ff, #2468e0); }
.po-info { text-align: center; min-width: 0; }
.po-info h3 { margin: 0 0 6px; font-size: clamp(26px, 4.8vh, 40px); color: #ffe6a8; -webkit-text-stroke: 6px var(--ink); }
.po-info p { color: #f6ecff; margin: 4px 0 10px; font-size: clamp(12px, 2.2vh, 16px); }
.po-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.po-items.center { margin: 8px 0 12px; }
.pi { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 4px 7px; border-radius: 12px; background: rgba(8, 10, 30, .78); border: 3px solid var(--ink); color: #fff; font-family: var(--font); font-size: clamp(13px, 2.4vh, 18px); letter-spacing: .5px; }
.pi .cico { height: 1.2em; } .pi img:not(.cico) { height: 1.9em; width: 1.9em; object-fit: contain; }
.pi.hero { border-color: #ffd36b; color: #ffe6a8; } .pi.hero svg { height: 1.2em; width: 1.2em; }
.po .btn.big { min-width: 200px; }
@media (max-width: 640px) { .po { grid-template-columns: 1fr; } .po-art { max-width: 340px; margin: 0 auto; width: 100%; } }

/* pile di diamanti composte dalle icone (dove non c'e' una grafica dedicata) */
.dp-pile { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; align-content: center; width: 100%; height: 100%; padding: 6%; box-sizing: border-box; }
.dp-pile img { height: 34%; min-height: 24px; margin: -4px -6px; transform: rotate(var(--r)); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5)); animation: dpfloat 2.6s ease-in-out var(--d) infinite; }
.dp-pile.big img { height: 46%; margin: 0 -2px; }
@keyframes dpfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* pacchetti di diamanti */
.dp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 17vw, 190px), 1fr)); gap: 12px; }
.dp { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; justify-items: center; gap: 2px; padding: 12px 8px 10px; border: 5px solid var(--ink); border-radius: 22px; background: linear-gradient(#2d6ad8, #17307a); box-shadow: 0 7px 0 rgba(0, 0, 0, .38), inset 0 3px 0 rgba(255, 255, 255, .25); color: #fff; cursor: pointer; font-family: inherit; overflow: hidden; transition: transform .12s; }
.dp:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(0, 0, 0, .38), inset 0 3px 0 rgba(255, 255, 255, .25); }
.dp.hot { background: linear-gradient(#8b3bd8, #3b1580); }
.dp-img { width: 100%; aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(ellipse at 50% 60%, rgba(110, 190, 255, .45), rgba(0, 0, 0, .55) 75%); overflow: hidden; }
.dp-art { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
.dp-n { font-family: var(--font); font-weight: 400; font-size: clamp(22px, 4.4vh, 32px); display: flex; align-items: center; gap: 4px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.dp-n .cico { height: 1.05em; }
.dp small { font-size: clamp(11px, 2vh, 14px); color: #d6e4ff; text-align: center; }
.dp-tag { margin: 2px 0; padding: 1px 8px 2px; border-radius: 10px; background: #ffd36b; color: #3a1d00; border: 3px solid var(--ink); font-family: var(--font); font-size: clamp(11px, 2vh, 14px); text-transform: uppercase; letter-spacing: .5px; }
.dp-price { margin-top: 4px; padding: 4px 16px 5px; border-radius: 14px; background: linear-gradient(#8dff7a, #20b83e); border: 3px solid var(--ink); box-shadow: 0 3px 0 #0f6a22; font-family: var(--font); font-size: clamp(16px, 3.2vh, 22px); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.dp-off { position: absolute; right: -30px; top: 10px; transform: rotate(35deg); width: 110px; text-align: center; font-style: normal; padding: 2px 0 3px; font-family: var(--font); font-size: clamp(13px, 2.4vh, 17px); color: #fff; background: linear-gradient(#ff5a4a, #c2182e); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; z-index: 2; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }

/* conferma acquisto e premi */
#modal.payconf .modal-box { width: min(94vw, 560px); text-align: center; }
.pc-price { font-family: var(--font); font-size: clamp(34px, 7vh, 56px); color: #8dff7a; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); margin: 4px 0; }
.pc-note { color: #d6e0ff; font-size: clamp(12px, 2.2vh, 15px); margin: 6px 0; }
#modal.payconf.pick .modal-box { width: min(96vw, 760px); }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; }
.pe-hero { cursor: pointer; font-family: inherit; }

/* Azrael: locandina verticale */
.po.azrael { grid-template-columns: minmax(150px, 220px) 1fr; }
.po.azrael .po-art { aspect-ratio: 540 / 836; max-height: clamp(200px, 46vh, 330px); margin: 0 auto; }
.po.azrael .po-img { object-position: 50% 50%; }
.po-rib { left: -42px; top: 18px; width: 170px; font-size: clamp(10px, 1.9vh, 14px); }
@media (max-width: 640px) { .po.azrael { grid-template-columns: 1fr; } .po.azrael .po-art { max-width: 220px; } }

/* le icone delle pile si dimensionano sulla larghezza (le percentuali di altezza non si risolvono qui) */
.dp-pile img { height: auto; width: 24%; min-height: 0; max-width: 64px; }
.dp-pile.big img { width: 22%; max-width: 110px; }
.dp-pile.big img { width: 26%; max-width: 130px; margin: 0 -6px; }
.dp-grid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.dp-n { font-size: clamp(20px, 4vh, 28px); }
.po-rib.p { background: linear-gradient(#c17bff, #6a2bc8); width: 190px; left: -50px; }
.po.pass { background: linear-gradient(135deg, #6a2bc8, #2a1160 60%, #120826); }