:root{
  --night:#0c0a24; --grape:#6d28ff; --lava:#ff7a1a; --diamond:#2ee6d6; --ink:#f4f0ff;
  --card:rgba(20,14,56,.82); --line:rgba(46,230,214,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font:600 18px/1.5 'Rajdhani',system-ui,sans-serif;min-height:100vh;
  padding-top:env(safe-area-inset-top,0)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--diamond);outline-offset:3px}

/* ---- background: night sky, Fortnite storm ring, floating blocks, Minecraft ground ---- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:
   radial-gradient(circle at 50% 110%,#3b1a8f 0,transparent 55%),
   linear-gradient(#0c0a24,#1a1050 70%,#2a1466)}
.bg::before{content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:48px 48px}
.storm{position:absolute;left:50%;top:38%;width:130vmin;height:130vmin;translate:-50% -50%;border-radius:50%;
  border:4px solid rgba(109,40,255,.55);box-shadow:0 0 90px 20px rgba(109,40,255,.35) inset,0 0 60px rgba(109,40,255,.4);
  animation:pulse 6s ease-in-out infinite}
@keyframes pulse{50%{scale:.94;opacity:.75}}
.cube{position:absolute;width:44px;height:44px;image-rendering:pixelated;
  background:linear-gradient(#5fd35f 0 30%,#8b5a2b 30%);box-shadow:inset -6px -6px 0 rgba(0,0,0,.25),inset 4px 4px 0 rgba(255,255,255,.2);
  animation:float 9s ease-in-out infinite}
.c2,.c5{background:linear-gradient(#2ee6d6,#12a89b)}
.c3,.c6{background:linear-gradient(#ff7a1a,#c4460a)}
.c1{left:6%;top:22%}.c2{left:88%;top:18%;animation-delay:-2s;scale:1.3}.c3{left:14%;top:62%;animation-delay:-4s;scale:.8}
.c4{left:80%;top:58%;animation-delay:-6s}.c5{left:48%;top:8%;animation-delay:-1s;scale:.7}.c6{left:66%;top:78%;animation-delay:-5s;scale:1.1}
@keyframes float{50%{transform:translateY(-26px) rotate(12deg)}}
.ground{position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(#5fd35f 0 14px,#3d8f3d 14px 20px,#8b5a2b 20px);
  box-shadow:0 -6px 0 rgba(0,0,0,.2)}
.ground::after{content:"";position:absolute;inset:20px 0 0;
  background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(0,0,0,.18) 30px 34px)}

/* optional custom background image (config.php) */
.bgimg{position:absolute;inset:0;background-size:cover;background-position:center}
.bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,10,36,.55),rgba(12,10,36,.75))}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:36px;width:auto;display:block}
.hero-logo{display:block;margin:0 auto 24px;max-width:min(300px,70vw);max-height:220px;width:auto;height:auto;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px clamp(16px,4vw,40px);background:rgba(12,10,36,.88);backdrop-filter:blur(8px);border-bottom:3px solid var(--grape)}
.brand{font:14px 'Press Start 2P',monospace;color:var(--diamond)}
.top nav{display:flex;align-items:center;gap:clamp(12px,2.5vw,28px)}
.top nav a:not(.donate):hover{color:var(--diamond)}
.donate{background:var(--lava);color:#1b0a00;padding:8px 16px;font-weight:700;border-radius:6px;box-shadow:0 4px 0 #a34100;transition:transform .1s}
.donate:hover{transform:translateY(2px);box-shadow:0 2px 0 #a34100}

/* ---- hero ---- */
main{max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,32px) 120px}
.hero{text-align:center;padding:clamp(48px,10vw,110px) 0 40px}
h1{font:clamp(26px,7vw,64px)/1.15 'Press Start 2P',monospace;margin:0 0 20px;color:#fff;
  text-shadow:4px 4px 0 var(--grape),8px 8px 0 rgba(0,0,0,.4);animation:drop .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes drop{from{transform:translateY(-40px);opacity:0}}
.tag{font-size:clamp(18px,2.6vw,24px);max-width:34ch;margin:0 auto 28px;color:#d9d0ff}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- buttons ---- */
.btn{display:inline-block;padding:12px 22px;border-radius:6px;font-weight:700;color:#fff;transition:transform .1s}
.btn.red{background:#e62117;box-shadow:0 4px 0 #8f120b}
.btn.pink{background:linear-gradient(90deg,#c13584,#e1306c,#f77737);box-shadow:0 4px 0 #7d1d4b}
.btn.dark{background:#2b2266;box-shadow:0 4px 0 #170f42}
.btn.gold{background:var(--lava);color:#1b0a00;box-shadow:0 4px 0 #a34100}
.btn:hover{transform:translateY(2px);filter:brightness(1.1)}

/* ---- cards ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;align-items:start}
.card{background:var(--card);border:3px solid var(--line);border-radius:10px;padding:22px;box-shadow:8px 8px 0 rgba(109,40,255,.45)}
.card h2,.sec{font:14px/1.6 'Press Start 2P',monospace;margin:0 0 16px;color:var(--diamond)}
.card h3{margin:14px 0 2px;font-size:22px}
.meta,.empty{color:#b9adf0;margin:0 0 14px}
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:6px;border:2px solid #000}
.thumb img{width:100%;height:100%;object-fit:cover;transition:scale .3s}
.thumb:hover img{scale:1.05}
.play{position:absolute;inset:0;margin:auto;width:70px;height:70px;border-radius:50%;background:rgba(230,33,23,.92);
  box-shadow:0 0 0 4px #fff}
.play::after{content:"";position:absolute;left:28px;top:20px;border:15px solid transparent;border-left:24px solid #fff;border-right:0}
.igwrap{display:flex;justify-content:center}
.igwrap .instagram-media{min-width:0!important;width:100%!important;margin:0!important}
.igcard{display:grid;place-content:center;justify-items:center;gap:8px;min-height:240px;text-align:center}

/* ---- more ---- */
.more{margin-top:56px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.vcard{background:var(--card);border:3px solid var(--line);border-radius:8px;overflow:hidden;display:block;transition:transform .15s,border-color .15s}
.vcard:hover{transform:translateY(-4px);border-color:var(--lava)}
.vcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.vcard span{display:block;padding:10px 12px;line-height:1.25}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{background:var(--grape);padding:8px 18px;border-radius:6px;font-weight:700;font-size:20px;box-shadow:0 4px 0 #3b0fa8}
.chip:nth-child(3n+2){background:#0f8f85;box-shadow:0 4px 0 #075a54}
.chip:nth-child(3n){background:#d2600a;box-shadow:0 4px 0 #8f3f00}
.about p{margin:0}
.links{display:flex;flex-wrap:wrap;gap:12px}
footer{position:relative;text-align:center;padding:0 16px 90px;font-size:15px;color:#e6dfff}

@media(max-width:760px){.split{grid-template-columns:1fr}.top nav a:not(.donate){display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}