/* The support pages, dressed like the game's itch.io page: the 04b_03 pixel font (crisp at
   multiples of 8px), the dark tiled backdrop, gold headings, wooden plank titles. Every
   animation is CSS and stops for anyone who asked their system for less motion. */
@font-face { font-family: "04b_03"; src: url("/static/04b03.woff2") format("woff2"), url("/static/04b03.woff") format("woff"); font-display: swap; }
:root {
    color-scheme: dark;
    --bg: #140e09; --column: #17181f; --plate: #23242c; --plate-hi: #2e2f36; --line: #393b48; --ink: #0b0b10;
    --text: #f3ead6; --dim: rgba(243, 234, 214, .62); --gold: #ffd34d; --button: #d9a520; --button-lo: #a87a08; --cream: #fff3d6; --wood: #3a2210;
    --px: "04b_03", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg) url("/static/support-bg.png") repeat 50% 0; }
body { margin: 0; color: var(--text); font: 16px/1.75 var(--px); -webkit-font-smoothing: none; overflow-x: hidden; }
img { image-rendering: pixelated; }
a { color: var(--gold); text-underline-offset: 4px; }
a:hover { color: var(--cream); }
b { color: var(--gold); font-weight: normal; }
h1, h2, h3 { font-weight: normal; margin: 0; }
.sr { position: absolute; opacity: 0; pointer-events: none; }
.center { text-align: center; }

main { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 24px 64px; background: var(--column); min-height: 100vh; box-shadow: 0 0 0 4px var(--ink); }

/* ---- falling flakes ---- */
.dust { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.dust i { position: absolute; top: -20px; left: var(--x); width: calc(var(--s) * 4px); height: calc(var(--s) * 4px); background: #8f8a7c;
    box-shadow: 0 0 0 2px var(--ink); opacity: .55; animation: fall var(--d) linear var(--w) infinite; }
.dust i:nth-child(3n) { background: #cfc8b4; }
.dust i:nth-child(4n) { background: var(--gold); opacity: .4; }
@keyframes fall { from { transform: translate(0, -20px) rotate(0); } 50% { transform: translate(40px, 55vh) rotate(180deg); } to { transform: translate(-10px, 110vh) rotate(360deg); } }
.confetti .dust i { background: var(--gold); opacity: .8; }
.confetti .dust i:nth-child(2n) { background: #ff6fb5; }
.confetti .dust i:nth-child(3n) { background: #6f86c9; }

/* ---- hero ---- */
.hero { text-align: center; padding-top: 24px; }
.scrape { position: relative; border: 4px solid var(--button); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
.scrape img { display: block; width: 100%; height: auto; }
/* the header comes clean from the left, as if scraped */
.scrape::after { content: ""; position: absolute; inset: 0; background: #57432f url("/static/support-bg.png"); animation: scrape 1.1s steps(22) .15s both; }
@keyframes scrape { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 36px 0 0; color: var(--dim); text-transform: uppercase; letter-spacing: .12em; }
.kicker img { animation: beat 1.6s steps(2) infinite; }
@keyframes beat { 50% { transform: scale(1.15); } }
h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1.05; color: var(--cream); margin: 10px 0 18px; text-shadow: 4px 4px 0 var(--wood); }
.shine { color: var(--gold); background: linear-gradient(100deg, var(--gold) 40%, #fff6c8 50%, var(--gold) 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; animation: shine 3.2s linear infinite; text-shadow: none; filter: drop-shadow(4px 4px 0 var(--wood)); }
@keyframes shine { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.lead { font-size: 24px; line-height: 1.6; max-width: 880px; margin: 0 auto; }
.promise { max-width: 880px; margin: 28px auto 0; padding: 18px 24px; background: var(--plate); border: 4px solid var(--button); box-shadow: 8px 8px 0 var(--ink); text-align: left; }
.alert { max-width: 880px; margin: 28px auto 0; background: #3a2a1a; border: 4px solid var(--button); padding: 14px 18px; text-align: center; }

/* ---- the switch ---- */
.pick { margin-top: 56px; }
.switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(560px, 100%); margin: 0 auto; background: var(--ink); border: 4px solid var(--line); padding: 4px; }
.switch label { position: relative; z-index: 1; text-align: center; padding: 12px 8px; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); cursor: pointer; transition: color .2s steps(2); }
.switch .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--button); box-shadow: inset 0 -4px 0 var(--button-lo); transition: transform .25s steps(5); }
#v-once:checked ~ .switch .thumb { transform: translateX(100%); }
#v-monthly:checked ~ .switch label[for=v-monthly], #v-once:checked ~ .switch label[for=v-once] { color: #fff; text-shadow: 0 2px 0 var(--button-lo); }
#v-monthly:focus-visible ~ .switch label[for=v-monthly], #v-once:focus-visible ~ .switch label[for=v-once] { outline: 2px solid var(--cream); outline-offset: -6px; }

.credit { width: min(560px, 100%); margin: 18px auto 0; color: var(--dim); }
.credit summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; text-align: center; cursor: pointer; list-style: none; }
.credit summary::-webkit-details-marker { display: none; }
.credit summary small { font-size: 16px; opacity: .7; }
.credit summary:hover { color: var(--cream); }
.credit[open] summary img { animation: spin 1.2s steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.credit .fields { display: grid; gap: 12px; margin-top: 12px; padding: 16px; background: var(--plate); border: 4px solid var(--line); }
.credit label { display: block; color: var(--text); }
.credit input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; background: var(--column); color: var(--text); border: 4px solid var(--line); font: 16px var(--px); }
.credit input:focus { outline: none; border-color: var(--button); }

/* ---- the cards ---- */
.grid { display: none; margin-top: 40px; gap: 20px; align-items: stretch; }
#v-monthly:checked ~ .monthly, #v-once:checked ~ .once { display: grid; }
.monthly { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.once { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1080px; margin-left: auto; margin-right: auto; }
.card { position: relative; display: flex; flex-direction: column; padding: 28px 20px 20px; background: var(--plate); border: 4px solid var(--line); box-shadow: 8px 8px 0 var(--ink);
    animation: rise .5s steps(6) both; animation-delay: calc(var(--i) * 90ms); transition: transform .18s steps(3), box-shadow .18s steps(3), border-color .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.card:hover { transform: translate(-4px, -8px); box-shadow: 12px 16px 0 var(--ink); border-color: #565a6e; }
.card.featured { background: linear-gradient(180deg, #33302a, var(--plate) 45%); border-color: var(--button); z-index: 1; animation: rise .5s steps(6) both, glow 2.4s steps(4) 1s infinite; animation-delay: calc(var(--i) * 90ms), 1s; }
@keyframes glow { 50% { box-shadow: 8px 8px 0 var(--ink), 0 0 0 4px rgba(255, 211, 77, .25); } }
.card.featured:hover { border-color: var(--gold); }
.badge { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); padding: 4px 14px; background: var(--button); color: #fff; text-shadow: 0 2px 0 var(--button-lo);
    box-shadow: 4px 4px 0 var(--ink); font-size: 16px; line-height: 1.5; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; animation: bob 1.4s steps(2) infinite; }
@keyframes bob { 50% { transform: translate(-50%, -4px); } }
.spark { position: absolute; width: 32px; height: 32px; animation: twinkle 1.8s steps(3) infinite; pointer-events: none; }
.spark.s1 { top: 10px; right: 10px; }
.spark.s2 { top: 64px; left: 12px; width: 16px; height: 16px; animation-delay: .9s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }

.ico { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 16px; background: var(--column); border: 4px solid var(--line); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .25); }
.ico img { width: 64px; height: 64px; animation: idle 2.4s steps(2) infinite; animation-delay: calc(var(--i) * -400ms); }
@keyframes idle { 50% { transform: translateY(-4px); } }
.card:hover .ico img { animation: wiggle .4s steps(4) infinite; }
@keyframes wiggle { 25% { transform: rotate(-8deg) translateY(-4px); } 75% { transform: rotate(8deg) translateY(-4px); } }
.featured .ico { border-color: var(--button); }

.card h3 { text-align: center; font-size: 24px; line-height: 1.25; color: var(--gold); min-height: 2.5em; display: grid; place-items: center; }
.price { text-align: center; margin: 4px 0 0; line-height: 1; }
.price b { font-size: 40px; color: var(--cream); text-shadow: 4px 4px 0 var(--wood); }
.price span { display: block; margin-top: 10px; color: var(--dim); font-size: 16px; }
.meter { display: flex; justify-content: center; gap: 4px; margin: 14px 0 0; }
.meter i { width: 16px; height: 8px; background: var(--column); box-shadow: inset 0 0 0 2px var(--line); }
.meter i.on { background: var(--button); box-shadow: inset 0 -2px 0 var(--button-lo); }
.tag { text-align: center; color: var(--dim); margin: 14px 0 0; line-height: 1.6; min-height: 4.8em; }
.plus { margin: 16px 0 0; padding-top: 14px; border-top: 4px dotted var(--line); color: var(--gold); line-height: 1.5; }
.card ul { list-style: none; margin: 12px 0 20px; padding: 0; flex: 1; }
.card li { position: relative; padding-left: 20px; margin-bottom: 10px; line-height: 1.6; }
.card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--button); box-shadow: 2px 2px 0 var(--ink); }
.once .card .tag { flex: 1; margin-bottom: 20px; }
.plus + ul { margin-top: 10px; }

/* ---- buttons ---- */
button, .btn { position: relative; display: block; width: 100%; margin-top: auto; overflow: hidden; background: var(--button); color: #fff; border: 0; cursor: pointer; text-decoration: none; text-align: center;
    min-height: 76px; padding: 14px 12px 18px; font: 16px/1.4 var(--px); text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 2px 0 var(--button-lo);
    box-shadow: inset 0 -6px 0 var(--button-lo), 4px 4px 0 var(--ink); transition: transform .08s steps(2); }
button span, .btn span { position: relative; z-index: 1; }
.card button { display: flex; align-items: center; justify-content: center; }
button::after, .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 24%; background: rgba(255, 255, 255, .28); transform: skewX(-20deg); transition: left .45s steps(8); }
button:hover::after, .btn:hover::after { left: 120%; }
button:hover, .btn:hover { filter: brightness(1.08); color: #fff; }
button:active, .btn:active { transform: translate(4px, 4px); box-shadow: inset 0 6px 0 var(--button-lo); }
button:focus-visible, .btn:focus-visible { outline: 4px solid var(--cream); outline-offset: 2px; }
.btn { display: inline-block; width: auto; min-height: 0; padding: 14px 28px 18px; }
.safe { text-align: center; color: var(--dim); margin: 28px 0 0; }

/* ---- plank titles ---- */
.plank { container-type: inline-size; position: relative; aspect-ratio: 840 / 90; max-width: 840px; margin: 80px auto 28px; background: url("/static/support-plank.png") center / 100% 100% no-repeat; filter: drop-shadow(8px 8px 0 var(--ink)); }
.plank span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: .6cqw; font-size: 6.2cqw; line-height: 1; color: var(--cream); text-transform: uppercase; letter-spacing: .04em; text-shadow: .45cqw .45cqw 0 var(--wood); white-space: nowrap; }

/* ---- where it goes ---- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why div { padding: 24px; background: var(--plate); border: 4px solid var(--line); box-shadow: 8px 8px 0 var(--ink); text-align: center; transition: transform .18s steps(3); }
.why div:hover { transform: translateY(-6px); }
.why img { width: 48px; height: 48px; animation: idle 2.4s steps(2) infinite; animation-delay: calc(var(--i) * -600ms); }
.why h3 { color: var(--gold); font-size: 24px; margin: 10px 0 6px; }
.why p { margin: 0; color: var(--dim); }

/* ---- the wall ---- */
.names { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.names li { padding: 6px 16px; background: var(--plate); border: 4px solid var(--line); box-shadow: 4px 4px 0 var(--ink); animation: pop .4s steps(4) both; animation-delay: calc(var(--i) * 60ms); }
.names li.patron { border-color: var(--button); color: var(--gold); }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }

/* ---- questions ---- */
.faq { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--plate); border: 4px solid var(--line); box-shadow: 6px 6px 0 var(--ink); }
.faq summary { padding: 14px 18px; cursor: pointer; list-style: none; color: var(--cream); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 24px; line-height: 1; transition: transform .2s steps(2); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 18px 16px; color: var(--dim); }
.faq details[open] { border-color: var(--button); }

.fine { margin-top: 80px; padding-top: 24px; border-top: 4px solid var(--line); text-align: center; color: var(--dim); }
.fine p { margin: 6px 0; }

/* ---- thank you ---- */
.thanks { padding-top: 10vh; max-width: 880px; margin: 0 auto; }
.claps { display: inline-grid; place-items: center; width: 160px; height: 160px; background: var(--plate); border: 4px solid var(--button); box-shadow: 8px 8px 0 var(--ink); animation: bob2 1s steps(2) infinite; }
.claps img { width: 96px; height: 96px; }
@keyframes bob2 { 50% { transform: translateY(-8px) rotate(-3deg); } }
.thanks > p { margin: 14px auto; }
.small { color: var(--dim); }

.hint { display: none; text-align: center; color: var(--dim); margin: 28px 0 0; animation: nudge 1.2s steps(2) infinite; }
@keyframes nudge { 50% { transform: translateX(8px); } }
#v-once:checked ~ .hint { display: none !important; }

/* ---- smaller screens ---- */
@media (max-width: 1180px) {
    .monthly { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 12px 28px 4px; margin-top: 16px; }
    .monthly .card { scroll-snap-align: center; }
    .hint { display: block; }
}
@media (max-width: 900px) {
    .once { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    main { padding: 0 14px 48px; }
    .lead { font-size: 16px; }
    .monthly { grid-auto-columns: 82%; }
    .once { grid-template-columns: 1fr; }
    .switch label { font-size: 16px; padding: 10px 4px; }
    .plank { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .dust { display: none; }
}