/* PiGamer Boost promo block (inc/boost-promo.php), on game pages, the home page, the shop, the order page and the empty cart. */
.bp { --bc: #00E5FF; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px;
  margin: 22px 0 0; padding: 22px 24px; border-radius: 26px; overflow: hidden; text-align: start;
  background: radial-gradient(120% 100% at 100% 0%, rgba(0, 229, 255, .16), transparent 60%), radial-gradient(90% 90% at 0% 100%, rgba(169, 139, 255, .14), transparent 60%), rgba(10, 27, 34, .72);
  border: 1px solid transparent; }
.bp::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--bpa, 0deg), rgba(0, 229, 255, .9), rgba(169, 139, 255, .35), rgba(255, 79, 163, .7), rgba(0, 229, 255, .25), rgba(0, 229, 255, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: bpSpin 6s linear infinite; }
@property --bpa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes bpSpin { to { --bpa: 360deg; } }
.bp::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 229, 255, .14), transparent 60%); }
.bp:hover::after { opacity: 1; }
.bp__kick { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font: 700 12.5px var(--f-head); color: var(--cyan);
  background: rgba(0, 229, 255, .08); border: 1px solid rgba(0, 229, 255, .3); }
.bp__kick i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(0, 229, 255, .6); animation: bpPing 2s infinite; }
@keyframes bpPing { to { box-shadow: 0 0 0 10px rgba(0, 229, 255, 0); } }
.bp__t { margin: 10px 0 6px; font: 800 clamp(19px, 2vw, 24px)/1.35 var(--f-head); color: var(--white); }
.bp__t span { white-space: nowrap; display: inline-block; background: linear-gradient(100deg, var(--cyan), #A98BFF 55%, #FF4FA3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bp p { margin: 0; color: var(--gray-2); font-size: 14.5px; line-height: 1.85; }
.bp__chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.bp__chips li { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; color: var(--gray-2); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.bp__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bp__ctas .btn { gap: 8px; }
.bp__bot { width: clamp(92px, 11vw, 130px); height: auto; align-self: end; margin-bottom: -22px; filter: drop-shadow(0 12px 24px rgba(0, 229, 255, .35)); animation: bpBob 4.5s ease-in-out infinite alternate; }
@keyframes bpBob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }

/* the home page section: wider, with the app's own screen */
.bp--band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); margin: 0; padding: clamp(24px, 4vw, 48px); border-radius: 32px; }
.bp--band .bp__t { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.2; }
.bp--band p { font-size: 16px; max-width: 520px; }
.bp__shot { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(0, 229, 255, .35); box-shadow: 0 40px 80px -40px rgba(0, 229, 255, .7);
  transform: perspective(1400px) rotateY(var(--bpy, -8deg)) rotateX(4deg); transition: transform .8s var(--ease, ease); }
[dir="ltr"] .bp__shot { --bpy: 8deg; }
.bp--band:hover .bp__shot { transform: perspective(1400px) rotateY(0) rotateX(0); }
.bp__shot img { display: block; width: 100%; height: auto; }

/* one line: shop and the empty cart */
.bp--strip { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; margin: 18px 0; padding: 14px 16px; border-radius: 20px; }
.bp--strip p { font-size: 14.5px; line-height: 1.6; }
.bp--strip p b { color: var(--white); }
.bp__spark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 20px; background: rgba(0, 229, 255, .12); box-shadow: 0 0 22px -6px var(--cyan); }
.bp--strip .btn { gap: 8px; white-space: nowrap; }

/* where it sits */
.pd .bp { margin-top: 18px; }
.cart__empty .bp { max-width: 640px; margin: 22px auto 0; }
.ty .bp { margin-top: 24px; }

@media (max-width: 900px) {
  .bp--band { grid-template-columns: minmax(0, 1fr); }
  .bp__shot { transform: none; }
}
@media (max-width: 560px) {
  .bp { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .bp__bot { display: none; }
  .bp--strip { grid-template-columns: auto minmax(0, 1fr); }
  .bp--strip .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .bp::before, .bp__kick i, .bp__bot { animation: none; } }