/* MZO site: SUPPORT page ("SUPPORT THE MOD"): BO7 forest hero + THE PROMISE, DONATE creator cards, WHAT IT KEEPS
   GOING, SUPPORTER REWARDS (coming soon, locked), OTHER WAYS TO HELP. Accent: supporter heart red (--sp).
   Markup: public/support.php, behaviour: site/js/support.js. */
body.page-support { --sp: #ff5d6c; --sp-2: #ffb3ba; --ok-c: #5fd38a; overflow-x: clip; }

/* ---------- hero ---------- */
.sp { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--pm, 0rem)); padding: calc(6rem + var(--pm, 0rem)) var(--g) 3rem; min-height: calc(36rem + var(--pm, 0rem)); display: flex; flex-direction: column; justify-content: flex-end; }
.sp-art { position: absolute; inset: 0; z-index: -2; }
.sp-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; animation: kenburns 45s ease-in-out infinite alternate; }
.sp::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
	radial-gradient(50% 60% at 78% 35%, rgba(255, 93, 108, .14), transparent 70%),
	linear-gradient(90deg, rgba(5, 6, 8, .95) 0%, rgba(5, 6, 8, .7) 42%, rgba(5, 6, 8, .25) 72%, rgba(5, 6, 8, .55) 100%),
	linear-gradient(180deg, rgba(5, 6, 8, .65) 0%, transparent 28%, transparent 58%, var(--bg, #050608) 100%); }
.sp::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 0.25rem); }
.sp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); gap: 2rem 3rem; align-items: end; }
.sp-title > p:first-child { display: flex; align-items: center; gap: 0.625rem; margin: 0; font: 700 max(11px, 1.125rem) var(--head); letter-spacing: .22em; color: var(--sp); }
.sp-title > p:first-child img { width: 1.75rem; height: 1.75rem; animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.15); } }
.sp-title h1 { margin: 0.25rem 0 0; font: 900 clamp(max(11px, 3.25rem), 7vw, 7.5rem) / .9 var(--head); letter-spacing: .02em; text-shadow: 0 0 2.5rem rgba(255, 93, 108, .25); overflow-wrap: anywhere; }
.sp-lead { max-width: 44rem; margin: 1.25rem 0 0; font-size: max(14px, 1.3125rem); line-height: 1.45; color: #e3e8ec; }
.sp-hints { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; }

.vow { position: relative; padding: 1rem 1.125rem 1.125rem; background: linear-gradient(180deg, rgba(22, 12, 14, .92), rgba(8, 6, 8, .94)); border: 1px solid rgba(255, 93, 108, .32); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .5); backdrop-filter: blur(6px); }
.vow::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, var(--sp), rgba(255, 93, 108, 0)); }
.vow-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.75rem; font: 700 max(10px, 0.8125rem) var(--head); letter-spacing: .18em; }
.vow-h b { padding: 0.125rem 0.5rem; font-weight: 900; color: #06210f; background: var(--ok-c); letter-spacing: .12em; }
.vow ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: #241a1c; border: 1px solid #241a1c; }
.vow li { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem; background: #0d0a0b; font: 900 max(12px, 1rem) var(--head); letter-spacing: .04em; line-height: 1.2; }
.vow li img { flex: none; width: 1.375rem; height: 1.375rem; }
.vow-v { margin: 0.75rem 0 0; font-size: max(11px, 0.875rem); color: #c9d2d8; }
.vow-v b { color: #fff; }

/* ---------- shared heading ---------- */
.page-support .section { scroll-margin-top: 4rem; }
.sec-h { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1.5rem; margin-bottom: 1.75rem; }
.sec-k { flex-basis: 100%; display: block; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .2em; color: var(--sp); }
.sec-h h2 { font: 900 max(11px, 2.75rem) / 1 var(--head); letter-spacing: .03em; }
.sec-h p { margin: 0; color: var(--muted); max-width: 52rem; }

/* ---------- DONATE ---------- */
.dc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dc-c { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 26rem; background: #0a0b0e; border: 1px solid var(--frame); transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.dc-c::before { content: ""; position: absolute; left: -1px; top: -1px; z-index: 2; width: 2rem; height: 3px; background: var(--sp); transition: width .35s var(--ease); }
.dc-c:hover, .dc-c:focus-within { border-color: rgba(255, 93, 108, .55); transform: translateY(-0.25rem); box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .45); }
.dc-c:hover::before, .dc-c:focus-within::before { width: 100%; }
.dc-art { position: absolute; inset: 0; z-index: -1; }
.dc-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.9) brightness(.8); transition: transform .8s var(--ease), filter .3s; }
.dc-c:hover .dc-art img { transform: scale(1.04); filter: saturate(1) brightness(.9); }
.dc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 6, 8, .15) 0%, rgba(6, 6, 8, .55) 40%, rgba(6, 6, 8, .96) 72%); }
.dc-body { margin-top: auto; display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.375rem; }
.dc-role { align-self: flex-start; margin: 0; padding: 0.1875rem 0.5rem; font: 900 max(10px, 0.75rem) var(--head); letter-spacing: .16em; color: #2a0509; background: var(--sp); }
.dc-body h3 { margin: 0.5rem 0 0; font: 900 max(22px, 3rem) / 1 var(--head); letter-spacing: .02em; overflow-wrap: anywhere; }
.dc-blurb { margin: 0.375rem 0 0; color: #c9d2d8; }
.dc-addr { display: flex; align-items: center; gap: 0.625rem; margin-top: 1.125rem; padding: 0.5rem 0.5rem 0.5rem 0.75rem; background: rgba(8, 8, 10, .85); border: 1px solid #2a2a30; min-width: 0; }
.dc-via { flex: none; font: 900 max(10px, 0.6875rem) var(--head); letter-spacing: .14em; color: var(--sp-2); }
.dc-addr code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 max(12px, 0.9375rem) ui-monospace, Consolas, monospace; color: #fff; user-select: all; }
.dc-copy { flex: none; padding: 0.3125rem 0.625rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .12em; color: #cfd6db; background: #16171c; border: 1px solid #33343c; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.dc-copy:hover, .dc-copy:focus-visible { border-color: var(--sp); color: #fff; }
.dc-copy.is-done { color: #06210f; background: var(--ok-c); border-color: var(--ok-c); }
.dc-go { display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin-top: 0.75rem; padding: 0.875rem 1rem; font: 900 max(14px, 1.25rem) var(--head); letter-spacing: .14em; color: #fff; background: linear-gradient(90deg, #c8283a, #ff5d6c); border: 1px solid rgba(255, 179, 186, .5); box-shadow: 0 0.5rem 1.5rem rgba(200, 40, 58, .3); transition: filter .2s, transform .2s var(--ease), box-shadow .2s; }
.dc-go img { width: 1.375rem; height: 1.375rem; filter: brightness(0) invert(1); }
.dc-go span { font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .14em; color: rgba(255, 255, 255, .78); }
.dc-go:hover, .dc-go:focus-visible { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 0.75rem 2rem rgba(255, 93, 108, .4); }
.dc-go:active { transform: translateY(1px); }
.dc-help { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0.875rem 0 0; padding: 0; font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .06em; color: var(--muted); }
.dc-help li::before { content: ""; display: inline-block; width: 0.375rem; height: 0.375rem; margin-right: 0.5rem; vertical-align: middle; background: var(--sp); transform: rotate(45deg); }

/* ---------- WHAT IT KEEPS GOING ---------- */
.kp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
.kp-c { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.125rem 1.125rem 1rem; background: var(--panel); border: 1px solid var(--frame); }
.kp-c::before { content: ""; position: absolute; left: -1px; top: -1px; width: 1.5rem; height: 2px; background: var(--sp); }
.kp-c b { font: 900 max(22px, 3rem) / 1 var(--head); font-variant-numeric: tabular-nums; color: #fff; }
.kp-c span { margin-top: 0.5rem; font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .14em; color: var(--sp-2); }
.kp-c small { margin-top: 0.25rem; color: var(--muted); font-size: max(11px, 0.875rem); }
.kp-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.kp-list li { display: grid; align-content: start; gap: 0.25rem; min-width: 0; padding: 0.875rem 1rem 0.875rem 1.125rem; background: rgba(10, 12, 15, .85); border: 1px solid #1e2328; border-left: 3px solid var(--sp); }
.kp-list b { font: 700 max(12px, 1rem) var(--head); letter-spacing: .03em; }
.kp-list span { color: var(--muted); font-size: max(11px, 0.9375rem); overflow-wrap: anywhere; }
.kp-list a, .hw a { color: var(--sp-2); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- SUPPORTER REWARDS ---------- */
.rw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
.rw-c { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; min-width: 0; padding: 1.5rem 1rem 1rem; text-align: center; background: var(--panel); border: 1px dashed #3a3036; }
.rw-c::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../support/locked.webp") center / 3rem repeat; opacity: .05; }
.rw-art { display: grid; place-items: center; width: 100%; height: 7rem; }
.rw-art img { max-width: 6rem; max-height: 6rem; filter: grayscale(.85) brightness(.7); transition: filter .3s, transform .3s var(--ease); }
.rw-c.is-camo .rw-art img { max-width: 100%; max-height: 7rem; object-fit: cover; }
.rw-c:hover .rw-art img { filter: grayscale(.2) brightness(.95); transform: scale(1.04); }
.rw-c b { font: 900 max(12px, 1.0625rem) var(--head); letter-spacing: .06em; overflow-wrap: anywhere; }
.rw-lock { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.5rem; font: 700 max(9px, 0.6875rem) var(--head); letter-spacing: .14em; color: var(--sp-2); background: rgba(255, 93, 108, .1); border: 1px solid rgba(255, 93, 108, .3); }
.rw-lock img { width: 0.875rem; height: 0.875rem; }

/* ---------- OTHER WAYS TO HELP ---------- */
.hw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.hw li { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; padding: 1rem 1.125rem 1.125rem; background: var(--panel); border: 1px solid var(--frame); }
.hw em { font: 900 max(11px, 0.875rem) var(--head); font-style: normal; color: var(--sp); }
.hw b { font: 900 max(13px, 1.25rem) var(--head); letter-spacing: .04em; }
.hw span { color: var(--muted); font-size: max(11px, 0.9375rem); }

/* ---------- sizes ---------- */
@media (max-width: 1500px) {
	.dc-c { min-height: 23rem; }
}
@media (max-width: 1080px) {
	.sp-head { grid-template-columns: minmax(0, 1fr); }
	.kp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kp-list, .hw { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.sp { min-height: 0; padding-top: calc(5rem + var(--pm, 0rem)); }
	.dc { grid-template-columns: minmax(0, 1fr); }
	.dc-c { min-height: 22rem; }
	.dc-body { padding: 1.25rem 1rem 1rem; }
	.dc-via { display: none; }
	.rw-art { height: 5rem; }
	.rw-art img { max-width: 4.5rem; max-height: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-title > p:first-child img { animation: none; }
}