/* layout.css: wide fluid containers, waitlist 3-col grid, nav X, Founder Pass showcase. Loaded after game.css / wl.css. */
:root{--lw:min(1600px,calc(100% - 48px))}

/* ---------- nav X: one icon (+ handle on wide screens) ---------- */
.tabs .nx{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tabs .nx svg{flex:none;display:block}
.tabs .nx .nxh{display:none}
@media (min-width:1100px){.tabs .nx .nxh{display:inline;font-size:.92em}}

/* ---------- wide containers ---------- */
.wlm{max-width:none;width:var(--lw);margin:0 auto;padding:0 0 50px}
.pk-in{max-width:none;width:min(1600px,100%)}
.peek{padding-left:24px;padding-right:24px}
.lay-doc{width:var(--lw);margin:0 auto;padding:22px 0 60px}
.dlay{max-width:none;width:var(--lw);padding:22px 0 60px;grid-template-columns:250px minmax(0,1fr)}
/* readable line length inside cards */
.dsec p,.dsec li,.lay-doc .panel p,.lay-doc .panel li,.wl-rules li{max-width:78ch}

/* text pages: sections in a 2-column grid on wide screens (row order kept) */
@media (min-width:1280px){
 .lay-doc main,.dlay main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
 .lay-doc main>h1,.lay-doc main>.sub2,.dlay main>h1,.dlay main>.sub2,.dlay main>p:not(.panel p){grid-column:1/-1}
 .lay-doc main>.panel,.dlay main>.panel{margin:0}
}

/* ---------- home: sneak peek clips fill the grid (big 2x2 + four small) ---------- */
@media (min-width:901px){
 .pk-clips{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- creators ---------- */
.cr-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;align-items:stretch}
.cr-two .wl-card{margin:0}
@media (max-width:1023px){.cr-two{grid-template-columns:minmax(0,1fr)}}

/* ---------- waitlist grid ---------- */
.wl-g3{display:grid;gap:20px;align-items:start;margin-bottom:20px}
.wl-ca,.wl-cb,.wl-cc{display:flex;flex-direction:column;gap:18px;min-width:0}
.wl-g3 .wl-card{margin:0}
.wl-g3 .ql{grid-template-columns:minmax(0,1fr)}
#rulesCard .wl-rules{column-width:520px;column-gap:28px}
#rulesCard .wl-rules li{break-inside:avoid}
@media (min-width:1440px){
 .wl-g3{grid-template-columns:minmax(0,1.08fr) minmax(0,1.2fr) minmax(0,1fr)}
}
@media (min-width:1024px) and (max-width:1439px){
 .wl-g3{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"a b" "c c"}
 .wl-ca{grid-area:a}.wl-cb{grid-area:b}
 .wl-cc{grid-area:c;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
}
.wl-ca .rp-card{position:relative;top:0}
@media (min-width:2200px){.wl-g3 .ql{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){
 .wl-g3{display:flex;flex-direction:column;gap:18px}
 .wl-ca,.wl-cb,.wl-cc{display:contents}
 .wl-ca .rp-card{position:relative;top:0;max-width:none;width:100%;margin:0;order:5}
 #joinCard,#rankCard,#verifyCard,#warCard{order:6}
 body:not(.joined) #joinCard,body:not(.joined) #rankCard,body:not(.joined) #verifyCard,body:not(.joined) #warCard{order:2}
 #questCard{order:7}#inviteCard{order:8}#cardCard{order:9}#boardCard{order:10}#prizeCard{order:11}#fpCard{order:12}
 .wl-g3 .ql{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){.wl-g3 .ql{grid-template-columns:minmax(0,1fr)}}

/* ---------- mobile: edge to edge ---------- */
@media (max-width:600px){
 :root{--lw:calc(100% - 20px)}
 .wlm{padding-bottom:96px}
 .peek{padding-left:10px;padding-right:10px}
 .wl-hero{border-radius:20px}
 .wl-card .btn,.cr-tile .btn,.pk-cta .btn,.wl-hc>.btn{width:100%;justify-content:center;box-sizing:border-box}
 .dlay{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Founder Pass showcase ---------- */
.wl-fp{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.fpx{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 2px}
.fpx-fan{position:relative;width:300px;max-width:100%;height:236px;perspective:900px}
.fpx-c{position:absolute;margin:0;border-radius:16px;padding:4px;background:linear-gradient(135deg,#fff6d6 0%,#f7c94f 22%,#9a6414 46%,#ffd76e 62%,#c58a1c 82%,#fff1c4 100%);
 box-shadow:0 0 0 2.5px #141a3a,0 7px 0 2px #0b0d24,0 16px 30px -10px rgba(0,0,0,.7);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;transform-style:preserve-3d}
.fpx-c::before,.fpx-c::after{content:"";position:absolute;width:12px;height:12px;background:#ffe48a;border:2px solid #141a3a;transform:rotate(45deg);z-index:4;box-shadow:0 0 8px rgba(255,214,110,.9)}
.fpx-c::before{left:50%;margin-left:-8px;top:-8px}.fpx-c::after{left:50%;margin-left:-8px;bottom:-8px}
.fpx-in{position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;border:2px solid #141a3a;background:#151a45}
.fpx-in.dk{background:radial-gradient(80% 60% at 50% 45%,#5a2fa0,#1b1340 70%)}
.fpx-in.lt{background:radial-gradient(80% 60% at 50% 45%,#ffd88a,#8a5a2a 75%)}
.fpx-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%;opacity:.55;filter:saturate(1.15)}
.fpx-in::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,13,36,.85));pointer-events:none}
.fpx-bot{position:absolute;left:50%;bottom:30px;height:68%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));z-index:1}
.fpx-pl{position:absolute;left:6px;right:6px;bottom:6px;z-index:3;display:flex;flex-direction:column;align-items:center;padding:3px 4px 4px;border-radius:8px;background:linear-gradient(180deg,#2b3878,#151a45);border:1.5px solid #f2b93b;font-family:Lil,Fre,sans-serif;font-size:11px;letter-spacing:.14em;color:#ffd76e;line-height:1.1}
.fpx-pl b{font-weight:400;font-size:15px;letter-spacing:.08em;background:linear-gradient(180deg,#fffdf2,#ffd36a 60%,#f0a020);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.fpx-pl i{font-family:Fre,sans-serif;font-style:normal;font-weight:700;font-size:10.5px;letter-spacing:.04em;color:#cdb8ff}
.fpx-tag{position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:3;font-family:Lil,Fre,sans-serif;font-size:10px;letter-spacing:.2em;color:#1d2552;background:linear-gradient(180deg,#fff1c4,#ffd36a 60%,#f0a020);border:1.5px solid #141a3a;border-radius:999px;padding:2px 9px 1px;white-space:nowrap}
.fpx-holo{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:color-dodge;opacity:.28;background:conic-gradient(from 210deg at 30% 30%,#ff6bd6,#6be4ff,#b6ff8a,#ffd36a,#c79bff,#ff6bd6);background-size:180% 180%;animation:fpxHolo 7s linear infinite}
.fpx-shine{position:absolute;inset:-30% -60%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 49%,rgba(255,236,170,.35) 53%,transparent 60%);transform:translateX(-70%);animation:fpxShine 4.6s ease-in-out infinite}
.fpx-c.main{left:50%;top:6px;width:156px;height:218px;margin-left:-78px;z-index:3}
.fpx-c.side{top:30px;width:120px;height:168px;opacity:.95}
.fpx-c.side .fpx-bot{height:64%}
.fpx-c.side.l{left:50%;margin-left:-142px;transform:rotate(-12deg)}
.fpx-c.side.r{left:50%;margin-left:22px;transform:rotate(12deg)}
.fpx.pre .fpx-c.side.l,.fpx.pre .fpx-c.side.r{transform:rotate(0) translateY(10px);opacity:0}
.fpx.pre .fpx-c.main{transform:translateY(16px) scale(.94);opacity:0}
.fpx:hover .fpx-c.side.l{transform:rotate(-17deg) translate(-8px,4px)}
.fpx:hover .fpx-c.side.r{transform:rotate(17deg) translate(8px,4px)}
.fpx-c.main{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.fpx:hover .fpx-c.main{transition:transform .25s ease-out}
.fpx:not(.tilt):hover .fpx-c.main{--rx:4deg;--ry:-8deg}
.fpx-cap{margin:0;text-align:center;font-weight:700;font-size:13.5px;color:#fff1cf;opacity:.92}
.fpx-cap span{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffd76e;border:1px solid rgba(242,185,59,.6);border-radius:999px;padding:1px 7px;vertical-align:1px}
@keyframes fpxShine{0%,55%{transform:translateX(-70%)}85%,100%{transform:translateX(70%)}}
@keyframes fpxHolo{0%{background-position:0 0}100%{background-position:180% 180%}}
@media (prefers-reduced-motion:reduce){.fpx-shine,.fpx-holo{animation:none}.fpx-c{transition:none}}
@media (max-width:360px){.fpx-fan{transform:scale(.9);transform-origin:top center;height:214px}}
.fpx-c.side .fpx-pl{display:none}
.fpx-c.side .fpx-bot{bottom:14px;left:auto;transform:none}
.fpx-c.side.l .fpx-bot{left:6px}.fpx-c.side.r .fpx-bot{right:6px}
.fpx-c.main .fpx-bot{bottom:52px;height:62%}
/* docs bot tiles: no mid-word breaks */
.bots8{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))!important}
.bots8 div{padding:8px 4px}
.bots8 b{overflow-wrap:normal;word-break:normal;font-size:15px;white-space:nowrap}
.bots8 div{font-size:12px}
/* privacy/terms: balanced masonry columns, no stretched empty cards */
@media (min-width:1280px){
 .lay-doc main{display:block;columns:2;column-gap:18px}
 .lay-doc main>h1,.lay-doc main>.sub2,.lay-doc main>p:not(.panel){column-span:all}
 .lay-doc main>.panel{break-inside:avoid;margin:0 0 18px;display:block}
}