/* ============================================================
   ARAZ (The Anomaly) — v4 "evidence board × game store"
   Hybrid of v2 (dark paper, typewriter type, pins/tape/polaroid)
   and v3 (sticky glass header, pill nav, gradient headline,
   glow ring, glass stats strip, glass cards, store badges).
   Fonts: Courier Prime (display), IBM Plex Mono (labels), IBM Plex Sans (body)
   ============================================================ */
:root{
  color-scheme:dark;
  --bg:#08060e;
  --bg2:#0f0b17;
  --paper:#17121f;
  --paper2:#1e1829;
  --line:#2e2540;
  --line2:#3b3050;
  --rule:rgba(233,226,207,.055);
  --grid:rgba(233,226,207,.035);
  --glass:rgba(255,255,255,.035);
  --glass2:rgba(20,15,32,.72);
  --gline:rgba(255,255,255,.08);
  --gline2:rgba(255,255,255,.14);
  --txt:#e7e0d2;
  --mut:#b6adc4;
  --bone:#eae3d0;
  --bone2:#cbc2ab;
  --accent:#8b5cf6;
  --accent2:#c4b5fd;
  --accent3:#f0abfc;
  --glow:rgba(139,92,246,.35);
  --red:#d24a4a;
  --modrinth:#1bd96a;
  --curse:#f16436;
  --support:#ec4899;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --type:"Courier Prime","IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --radius:18px;
  --head-h:72px;
  --ico-dl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
  --ico-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E");
  --ico-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.6-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.4-9.5 9-9.5 9z'/%3E%3C/svg%3E");
  --grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 7 -1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(139,92,246,.45);color:#fff}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:8px}
img{max-width:100%;height:auto}
svg{display:block}

/* ---------- background: board grid + vignette (v2), glow orbs (v3), grain ---------- */
.board{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%, transparent 45%, rgba(0,0,0,.55) 100%),
    radial-gradient(1200px 700px at 50% -20%, rgba(139,92,246,.16), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg2), var(--bg) 45%, #05040a 100%);
  background-size:auto,auto,32px 32px,32px 32px,auto;
}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42;mix-blend-mode:screen;will-change:transform}
.orb-1{width:560px;height:560px;left:-180px;top:-160px;background:radial-gradient(circle at 35% 35%,#7c3aed 0%,rgba(124,58,237,0) 65%);animation:drift-a 26s ease-in-out infinite alternate}
.orb-2{width:620px;height:620px;right:-240px;top:8%;background:radial-gradient(circle at 60% 40%,#a21caf 0%,rgba(162,28,175,0) 65%);animation:drift-b 32s ease-in-out infinite alternate}
.orb-3{width:520px;height:520px;left:24%;bottom:-280px;background:radial-gradient(circle,#4c1d95 0%,rgba(76,29,149,0) 65%);animation:drift-c 28s ease-in-out infinite alternate}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(120px,80px,0) scale(1.1)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-140px,110px,0) scale(.95)}}
@keyframes drift-c{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(100px,-100px,0) scale(1.08)}}
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:screen;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size:180px 180px;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* ---------- glass primitive (v3) ---------- */
.glass{
  background:var(--glass);
  border:1px solid var(--gline);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.35);
}

/* ---------- header: sticky glass + pill nav (v3), typewriter logo (v2) ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:rgba(8,6,14,.55);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
header.scrolled{background:rgba(8,6,14,.84);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:var(--head-h)}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--bone);text-decoration:none;font:700 1.02rem/1 var(--type);letter-spacing:.3em;padding-left:.1em}
.logo img{width:34px;height:34px;border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 24px rgba(139,92,246,.35)}
.nav{display:flex;justify-content:center;min-width:0}
.pill{
  display:inline-flex;align-items:center;gap:2px;padding:4px;max-width:100%;
  border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--gline);
  overflow-x:auto;scrollbar-width:none;
}
.pill::-webkit-scrollbar{display:none}
.pill a{
  white-space:nowrap;color:var(--mut);text-decoration:none;
  font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:10px 16px;border-radius:999px;transition:color .2s,background .2s;
}
.pill a:hover{color:#fff;background:rgba(255,255,255,.06)}
.pill a.active{color:#fff;background:linear-gradient(135deg,rgba(139,92,246,.45),rgba(139,92,246,.2));box-shadow:inset 0 0 0 1px rgba(196,181,253,.25)}
.lang-wrap{position:relative;display:inline-flex;align-items:center}
.lang-ic{position:absolute;left:12px;color:var(--accent2);pointer-events:none}
#lang{
  appearance:none;-webkit-appearance:none;
  background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b6adc4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:var(--txt);border:1px solid var(--gline);border-radius:999px;
  padding:9px 32px 9px 36px;font-size:16px;font-family:var(--mono);line-height:1.2; /* 16px: iOS Safari odakta yakınlaştırmasın */
  cursor:pointer;max-width:170px;transition:border-color .2s,background-color .2s;
}
#lang:hover{border-color:var(--gline2)}
#lang option{background:#14101f;color:var(--txt)}

/* ---------- decorations: pin, tape (v2 props) ---------- */
.pin{
  position:absolute;left:50%;top:-7px;width:16px;height:16px;margin-left:-8px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 35% 30%,#ff9d94 0,#d94343 42%,#8a1c25 100%);
  box-shadow:0 3px 6px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.4);
}
.pin::after{content:"";position:absolute;left:3px;top:15px;width:10px;height:5px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(1.5px)}
.tape{
  position:absolute;width:96px;height:26px;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(233,226,207,.2) 0 5px,rgba(233,226,207,.14) 5px 10px);
  box-shadow:0 1px 2px rgba(0,0,0,.3);
  clip-path:polygon(2% 0,98% 0,100% 22%,97% 46%,100% 72%,98% 100%,2% 100%,0 76%,3% 50%,0 24%);
}

/* ---------- paper surface (kept only for the props: polaroid card, index cards, torn note) ---------- */
.paper{
  position:relative;
  background:
    repeating-linear-gradient(180deg,transparent 0 27px,var(--rule) 27px 28px),
    linear-gradient(180deg,var(--paper2),var(--paper));
  border:1px solid var(--line);
  box-shadow:0 26px 40px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(233,226,207,.05);
}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px 48px;align-items:center;padding:72px 20px 40px}
.hero-text{min-width:0}
.stamp{
  position:relative;display:inline-block;margin:0 0 24px 2px;padding:.75em 1.1em .7em;
  font:600 .7rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--accent2);
  border:2px solid currentColor;border-radius:3px;
  transform:rotate(-2.5deg);transform-origin:left center;
  -webkit-mask:var(--grunge) 0 0/240px 120px;mask:var(--grunge) 0 0/240px 120px;
}
.stamp::before{content:"";position:absolute;inset:3px;border:1px solid currentColor;border-radius:2px;pointer-events:none}
h1{
  margin:0 0 18px;font:700 clamp(2.1rem,4.8vw,3.5rem)/1.08 var(--type);letter-spacing:-.01em;
  background:linear-gradient(100deg,#ffffff 0%,#efe9ff 40%,#c4b5fd 72%,#f0abfc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(139,92,246,.3));
  text-wrap:balance;
}
.lead{margin:0 0 28px;font-size:1.1rem;color:var(--mut);max-width:560px;text-wrap:pretty}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;border-radius:14px;
  border:1px solid transparent;font:600 .95rem/1.25 var(--mono);letter-spacing:.02em;text-decoration:none;color:#fff;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s,background .2s;
}
.btn::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{--ico:var(--ico-dl);background:linear-gradient(135deg,#a78bfa 0%,#7c3aed 55%,#6d28d9 100%);box-shadow:0 8px 28px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{box-shadow:0 14px 40px rgba(124,58,237,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--gline2);color:var(--txt);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:rgba(196,181,253,.55);background:rgba(139,92,246,.12)}
#discord-btn{--ico:var(--ico-chat)}
#support-btn{--ico:var(--ico-heart)}
.btn-support{--ico:var(--ico-heart);background:linear-gradient(135deg,#f472b6,#db2777);color:#fff;padding:14px 26px;font-size:1rem;box-shadow:0 8px 28px rgba(219,39,119,.35)}
.btn-support:hover{box-shadow:0 14px 40px rgba(219,39,119,.5)}

.versions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:26px 0 0;font:400 .85rem/1.4 var(--mono);color:var(--mut)}
.chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.chips b{padding:4px 11px;border-radius:999px;border:1px solid var(--gline);background:rgba(255,255,255,.05);color:#fff;font-weight:500;font-size:.78rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* glass stats strip (v3) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0 0;max-width:520px;border-radius:16px;overflow:hidden}
.stats>div{display:flex;flex-direction:column;align-items:center;padding:14px 8px;border-left:1px solid var(--gline)}
.stats>div:first-child{border-left:0}
.stats b{font:600 clamp(1.3rem,2.4vw,1.7rem)/1.1 var(--mono);background:linear-gradient(120deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font:500 .66rem/1.2 var(--mono);color:var(--mut);text-transform:uppercase;letter-spacing:.14em;margin-top:6px}

/* evidence cluster (v2): polaroid + index card + red thread, with a glow ring behind (v3) */
.evidence{position:relative;width:min(380px,100%);aspect-ratio:1/.88;margin:0 0 0 auto;perspective:900px}
.halo{
  position:absolute;left:-6%;top:-3%;width:82%;aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(139,92,246,.42),rgba(139,92,246,.1) 45%,rgba(139,92,246,0) 68%);
  filter:blur(12px);animation:breathe 6s ease-in-out infinite;
}
.ring{
  position:absolute;left:-4%;top:-1%;width:78%;aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;opacity:.85;
  background:conic-gradient(from 0deg,transparent 0 56%,rgba(196,181,253,.85) 72%,var(--accent) 80%,transparent 92% 100%);
  -webkit-mask:radial-gradient(circle,transparent calc(50% - 2.5px),#000 calc(50% - 1.5px),#000 calc(50% - .5px),transparent 50%);
  mask:radial-gradient(circle,transparent calc(50% - 2.5px),#000 calc(50% - 1.5px),#000 calc(50% - .5px),transparent 50%);
  animation:spin 9s linear infinite;
}
.polaroid{
  position:absolute;left:2%;top:3%;width:66%;padding:5% 5% 15%;z-index:3;
  background:linear-gradient(165deg,#f1eadb 0%,#e4dbc7 60%,#d6ccb5 100%);
  border-radius:2px;transform:rotate(-4deg);transform-origin:50% 40%;
  box-shadow:0 26px 36px -14px rgba(0,0,0,.95),0 2px 6px rgba(0,0,0,.45),0 0 40px rgba(139,92,246,.18),inset 0 0 0 1px rgba(255,255,255,.35);
  transition:transform .35s var(--ease);
}
.polaroid::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(115deg,rgba(0,0,0,0) 0 6px,rgba(0,0,0,.025) 6px 7px),radial-gradient(120% 90% at 70% 0%,rgba(255,255,255,.3),transparent 55%)}
.photo{position:relative;aspect-ratio:1;background:#000;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.photo img{width:100%;height:100%;display:block;image-rendering:crisp-edges;image-rendering:pixelated;animation:flicker 11s infinite}
.photo img.glitch{animation:glitch .28s steps(2) 1}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px),radial-gradient(circle at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
.scribble{position:absolute;left:9%;right:9%;bottom:4.5%;height:9%;width:82%;color:#2a1d3e;opacity:.8}
.index-card{position:absolute;right:0;top:42%;width:60%;aspect-ratio:5/3.1;transform:rotate(6deg);z-index:1;padding:14% 8% 6% 16%}
.index-card::before{content:"";position:absolute;left:12%;top:0;bottom:0;border-left:1px solid rgba(210,74,74,.4)}
.scrawl{width:100%;height:auto;color:var(--bone);opacity:.4}
.thread{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.tape-corner{right:-26px;top:-9px;transform:rotate(42deg);width:80px}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes flicker{
  0%,91%,100%{opacity:1;transform:none;filter:none}
  92%{opacity:.35;transform:translateX(2px)}
  93%{opacity:1;transform:translateX(-2px);filter:contrast(1.6)}
  95%{opacity:.6}
  96%{opacity:1;transform:none;filter:none}
}
@keyframes glitch{
  0%{transform:translate(3px,-1px);filter:contrast(1.8) invert(.12)}
  50%{transform:translate(-4px,1px) scaleY(1.04);opacity:.55}
  100%{transform:none;filter:none}
}

/* entrance (only with fx.js → .js) */
.js .hero-text > *{animation:rise .7s var(--ease) both}
.js .hero-text > :nth-child(2){animation-delay:.08s}
.js .hero-text > :nth-child(3){animation-delay:.16s}
.js .hero-text > :nth-child(4){animation-delay:.24s}
.js .hero-text > :nth-child(5){animation-delay:.32s}
.js .hero-text > :nth-child(6){animation-delay:.4s}
.js .hero-text > .stamp{animation:stampIn .55s cubic-bezier(.2,1.4,.4,1) both}
.js .evidence{animation:drop .9s var(--ease) both .15s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes stampIn{from{opacity:0;transform:rotate(-2.5deg) scale(1.7)}to{opacity:1;transform:rotate(-2.5deg) scale(1)}}
@keyframes stampInSm{from{opacity:0;transform:rotate(-2.5deg) scale(1.22)}to{opacity:1;transform:rotate(-2.5deg) scale(1)}}
@keyframes drop{from{opacity:0;transform:translateY(-18px) rotate(-1deg)}to{opacity:1;transform:none}}

/* ---------- recovered note (torn paper, v2) ---------- */
.quote{padding:18px 20px 26px}
.torn-wrap{position:relative;max-width:840px;margin:0 auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.6))}
.torn{
  padding:36px 40px 38px;
  clip-path:polygon(0 6px,3% 0,7% 5px,12% 1px,18% 6px,25% 2px,33% 7px,40% 1px,47% 5px,55% 0,62% 6px,70% 2px,77% 7px,84% 1px,91% 5px,97% 0,100% 6px,
    100% calc(100% - 5px),96% 100%,90% calc(100% - 6px),83% calc(100% - 1px),75% calc(100% - 7px),66% calc(100% - 2px),58% calc(100% - 6px),50% calc(100% - 1px),42% calc(100% - 7px),34% calc(100% - 2px),26% calc(100% - 6px),18% calc(100% - 1px),10% calc(100% - 5px),4% 100%,0 calc(100% - 4px));
}
.torn::before{content:"";position:absolute;left:34px;top:0;bottom:0;border-left:1px solid rgba(210,74,74,.35)}
.torn blockquote{margin:0;padding-left:12px;font:italic 400 1.1rem/1.75 var(--type);color:var(--bone)}
.tape-l{left:-14px;top:-9px;transform:rotate(-38deg)}
.tape-r{right:-14px;top:-9px;transform:rotate(38deg)}

/* ---------- sections ---------- */
.block{padding:56px 20px}
.center{text-align:center}
.center .sec-head{justify-content:center}
.sec-head{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.sec-head::before{content:"";flex:none;width:30px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent3));box-shadow:0 0 14px var(--glow)}
.h2box{min-width:0}
.sec-head h2{
  display:inline;margin:0;padding:0 .2em;
  font:700 clamp(1.45rem,3vw,2rem)/1.35 var(--type);color:var(--bone);
  background:linear-gradient(180deg,transparent 64%,rgba(139,92,246,.38) 64% 94%,transparent 94%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.barcode{margin-left:auto;height:22px;width:auto;color:var(--bone);opacity:.3;flex:none}

/* glass file panel with a folder tab (v2 file × v3 glass) */
.panel{
  position:relative;padding:34px 36px 36px;margin-top:16px;border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(139,92,246,.08),rgba(255,255,255,.03) 40%,rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.45);
}
.panel::before{content:"";position:absolute;top:-15px;left:28px;width:132px;height:16px;background:rgba(30,24,41,.92);border:1px solid var(--gline2);border-bottom:0;border-radius:8px 8px 0 0}
.panel::after{content:"";position:absolute;top:-15px;left:174px;width:64px;height:16px;background:rgba(22,17,31,.9);border:1px solid var(--gline);border-bottom:0;border-radius:8px 8px 0 0;opacity:.8}

/* timeline (how it learns) */
.timeline{position:relative;margin:8px 0 30px;padding-left:54px}
.timeline::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;border-left:2px dashed rgba(185,156,255,.4)}
.tl{position:relative;margin-bottom:18px}
.tl:last-child{margin-bottom:0}
.tl-mark{
  position:absolute;left:-54px;top:8px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:var(--accent2);
  background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(139,92,246,.1));
  border:1px solid rgba(196,181,253,.35);box-shadow:0 0 18px var(--glow);
}
.tl-mark svg{width:17px;height:17px}
.tl p{
  margin:0;padding:16px 20px 16px 24px;color:var(--txt);font-size:1rem;
  background:rgba(255,255,255,.03);border:1px solid var(--gline);border-left:3px solid rgba(210,74,74,.65);border-radius:0 12px 12px 0;
}

/* cards */
.grid{display:grid;gap:22px 18px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-top:30px}
.card{position:relative;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity .3s;
  background:radial-gradient(420px 200px at var(--mx,50%) var(--my,0%),rgba(139,92,246,.16),transparent 60%);
}
.card:hover{border-color:rgba(196,181,253,.4);transform:rotate(0) translateY(-4px);box-shadow:0 30px 44px -26px rgba(0,0,0,.95),0 0 0 1px rgba(139,92,246,.25)}
.card:hover::before{opacity:1}
.card p{margin:0;color:var(--mut);font-size:.95rem}

.folder{padding:0 22px 22px;border-radius:14px}
.folder h3{
  display:inline-block;margin:0 0 14px -22px;padding:.55em 1em .5em 22px;max-width:calc(100% - 30px);
  font:600 .74rem/1.35 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);
  background:rgba(139,92,246,.18);border-right:1px solid var(--gline2);border-bottom:1px solid var(--gline2);border-radius:13px 0 10px 0;
}
.folder .ico{position:absolute;right:16px;top:12px;width:34px;height:34px;color:var(--accent2);opacity:.9}
.folder .ico svg{width:100%;height:100%}

/* pinned index cards (v2 prop) */
.index{padding:26px 20px 22px;border-radius:4px;transform:rotate(var(--r,0deg))}
.index .ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;color:var(--accent2);background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(139,92,246,.08));border:1px solid rgba(196,181,253,.25);box-shadow:0 0 22px rgba(139,92,246,.18);margin-bottom:14px}
.index .ico svg{width:24px;height:24px}
.index h3{margin:0 0 8px;font:700 1.1rem/1.3 var(--type);color:#fff}
.grid.three .card:nth-child(3n+1){--r:-.8deg}
.grid.three .card:nth-child(3n+2){--r:.6deg}
.grid.three .card:nth-child(3n){--r:-.4deg}

/* ---------- download: store CTA (v3) with taped memo + badges (v2 ids) ---------- */
.cta{
  position:relative;display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
  padding:34px 26px 30px;margin-top:16px;border-radius:24px;overflow:hidden;
  background:
    linear-gradient(rgba(14,11,23,.86),rgba(14,11,23,.86)) padding-box,
    linear-gradient(135deg,rgba(139,92,246,.7),rgba(240,171,252,.25) 50%,rgba(27,217,106,.35)) border-box;
  border:1px solid transparent;
  box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.cta-glow{position:absolute;width:520px;height:520px;right:-180px;top:-220px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(139,92,246,.35),rgba(139,92,246,0) 62%);filter:blur(30px)}
.cta-copy{position:relative;min-width:0}
.cta .sec-head{margin-bottom:14px}
.dl-p{margin:0 0 22px;color:var(--mut);max-width:560px;text-wrap:pretty}
.memo{position:relative;margin-top:26px;max-width:560px}
.note{padding:16px 20px;border:1px dashed rgba(233,226,207,.28);border-radius:12px;color:var(--mut);font:400 .86rem/1.65 var(--mono);background:rgba(240,171,252,.05)}
.tape-top{left:50%;top:-12px;transform:translateX(-50%) rotate(-2deg)}
.badges{position:relative;display:grid;gap:12px}
.badge{
  display:flex;align-items:center;gap:14px;padding:14px 20px;min-height:68px;border-radius:16px;text-decoration:none;color:#fff;
  font:700 1.1rem/1.2 var(--type);letter-spacing:.01em;
  background:rgba(255,255,255,.04);border:1px solid var(--gline2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.35);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s,background .2s;
}
.badge svg{flex:none;width:36px;height:36px;padding:7px;border-radius:10px}
.badge:hover{transform:translateY(-3px)}
.badge-modrinth svg{color:var(--modrinth);background:rgba(27,217,106,.14)}
.badge-modrinth:hover{border-color:rgba(27,217,106,.6);box-shadow:0 14px 40px rgba(27,217,106,.2),inset 0 1px 0 rgba(255,255,255,.06)}
.badge-curse svg{color:var(--curse);background:rgba(241,100,54,.16)}
.badge-curse:hover{border-color:rgba(241,100,54,.65);box-shadow:0 14px 40px rgba(241,100,54,.22),inset 0 1px 0 rgba(255,255,255,.06)}
@media (min-width:860px){
  .cta{grid-template-columns:1.25fr .75fr;padding:44px 48px 40px;gap:40px}
  .badges{max-width:320px;margin-left:auto;width:100%}
}

/* ---------- support (glass card with a pin) ---------- */
.donate{
  position:relative;max-width:640px;margin:0 auto;padding:44px 30px 36px;border-radius:24px;text-align:center;
  background:linear-gradient(160deg,rgba(236,72,153,.10),rgba(255,255,255,.03) 50%,rgba(139,92,246,.10));
}
.donate .ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:16px;border-radius:12px}
.donate .ico svg{width:24px;height:24px}
.ico-heart{color:#f9a8d4;background:linear-gradient(135deg,rgba(236,72,153,.3),rgba(236,72,153,.08));border:1px solid rgba(249,168,212,.3);box-shadow:0 0 22px rgba(236,72,153,.25)}
.donate h2{margin:0 0 12px;font:700 1.7rem/1.3 var(--type);color:var(--bone)}
.donate p{margin:0 auto 22px;color:var(--mut);max-width:520px;text-wrap:pretty}

/* ---------- faq (glass rows) ---------- */
.faq{display:grid;gap:12px;margin-top:4px}
.faq details{border-radius:14px;padding:0;overflow:hidden;transition:border-color .25s}
.faq details[open]{border-color:rgba(196,181,253,.4)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;color:#fff;font:600 1rem/1.45 var(--sans);
  padding:18px 56px 18px 20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:18px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  background:rgba(139,92,246,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
  border:1px solid rgba(196,181,253,.25);
  transition:transform .3s var(--ease),background-color .2s;
}
.faq summary:hover::after{background-color:rgba(139,92,246,.32)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{margin:0;padding:0 20px 18px;color:var(--mut);font-size:.95rem;animation:fade-in .35s var(--ease)}
@keyframes fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- footer ---------- */
footer{position:relative;z-index:1;border-top:1px dashed rgba(233,226,207,.2);margin-top:32px;padding:36px 0 44px;background:rgba(5,4,10,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.foot{text-align:center}
.logo-foot{display:inline-flex;margin-bottom:12px;padding-left:0}
.logo-foot img{width:28px;height:28px}
.foot p{margin:4px 0;font:400 .85rem/1.6 var(--mono);color:var(--txt)}
.foot .mut{color:var(--mut);font-size:.78rem}

/* ---------- scroll reveal (only when fx.js is present) ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:44px;gap:30px}
  /* overflow:clip: the stamp's scale-in and the h1 glow must never widen the page on phones */
  .hero-text{display:flex;flex-direction:column;align-items:center;padding-top:8px;overflow:clip;overflow-clip-margin:24px}
  .js .hero-text > .stamp{animation-name:stampInSm}
  .lead{margin-left:auto;margin-right:auto}
  .btns,.versions,.chips{justify-content:center}
  .stats{margin-left:auto;margin-right:auto;width:100%}
  .evidence{order:-1;margin:0 auto;width:min(320px,100%)}
  .stamp{transform-origin:center}
}
@media (max-width:640px){
  :root{--head-h:112px}
  .bar{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px 12px;padding:10px 16px}
  .logo{grid-column:1;grid-row:1}
  .lang-wrap{grid-column:2;grid-row:1}
  .nav{grid-column:1 / -1;grid-row:2;justify-content:flex-start}
  .pill{width:100%;justify-content:flex-start}
  .pill a{padding:8px 11px;font-size:.7rem;letter-spacing:.08em}
  #lang{max-width:150px;padding-right:28px}
  .stamp{letter-spacing:.15em;line-height:1.5;padding:.55em .9em .5em}
  .wrap{padding:0 16px}
  .hero{padding:32px 16px 28px}
  .btns .btn{flex:1 1 140px}
  .versions-label{flex-basis:100%;text-align:center}
  .block{padding:44px 16px}
  .panel{padding:28px 18px 24px}
  .torn{padding:28px 22px 30px}
  .torn::before{left:16px}
  .torn blockquote{padding-left:8px;font-size:1.02rem}
  .timeline{padding-left:46px}
  .timeline::before{left:15px}
  .tl-mark{left:-46px;width:32px;height:32px}
  .tl p{padding:14px 16px 14px 18px}
  .barcode{display:none}
  .grid{gap:22px 16px}
  .cta{padding:28px 18px 24px}
  .donate{padding:38px 20px 30px}
  .orb{filter:blur(50px)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal{opacity:1;transform:none}
  .card:hover{transform:none}
}