/* Feedcade site: simple + playful. Off-white, ink, a few candy colours, rounded Bricolage Grotesque, bouncy hovers. */
:root{--bg:#FBFAF7;--card:#fff;--ink:#16151A;--mut:#6E6B75;--line:rgba(22,21,26,.1);
--lemon:#FFE36E;--pink:#FF9FC8;--sky:#8FD3FF;--mint:#9BE8C0;--lilac:#B9A6FF;
--disp:'Bricolage Grotesque',system-ui,sans-serif;--text:'Bricolage Grotesque',system-ui,sans-serif;--mono:ui-monospace,'SF Mono',Consolas,monospace;
--r:22px;--pad:clamp(18px,4vw,64px);--bounce:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.55 var(--text);min-height:100vh;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--lemon)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.sr{position:absolute;left:-9999px}
.mut{color:var(--mut)}
.mono{font-family:var(--mono)}
.lab{font:600 14px/1 var(--text);color:var(--mut);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.lab a{color:var(--ink)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--mint);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.5)}}
em{font-style:normal}

.nav{display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad)}
.logo img{display:block;height:34px;width:auto;transition:transform .3s var(--bounce)}.logo:hover img{transform:rotate(-3deg) scale(1.04)}
.navcta{font:700 15px/1 var(--text);text-decoration:none;background:var(--card);border:2px solid var(--ink);padding:11px 18px;border-radius:99px;transition:transform .25s var(--bounce),background .2s}
.navcta:hover{background:var(--lemon);transform:rotate(-2deg) scale(1.04)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;border:0;border-radius:99px;padding:15px 26px;font:700 17px/1 var(--text);color:#fff;background:var(--ink);transition:transform .25s var(--bounce)}
.btn:hover{transform:scale(1.05) rotate(-1.5deg)}.btn:active{transform:scale(.97)}
.btn span{display:inline-block;transition:transform .25s var(--bounce)}.btn:hover span{transform:translateX(4px)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn[disabled]{opacity:.45;pointer-events:none}
.card{background:var(--card);border-radius:var(--r);padding:22px;box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(22,21,26,.25)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);padding:clamp(24px,4vw,60px) var(--pad) clamp(50px,6vw,90px);align-items:start}
h1.big{font:800 clamp(54px,8vw,138px)/.92 var(--disp);letter-spacing:-.025em;margin:0 0 28px}
h1.big .ln{display:block}
h1.big .ln>span{display:inline-block;animation:pop .8s var(--bounce) both}
h1.big .ln:nth-child(2)>span{animation-delay:.08s}
h1.big em{position:relative;white-space:nowrap;z-index:0}
h1.big em:after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;height:.36em;background:var(--lemon);border-radius:.2em;z-index:-1;transform:rotate(-1.5deg);animation:mark .7s .5s var(--bounce) both;transform-origin:left}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mark{from{transform:scaleX(0) rotate(-1.5deg)}to{transform:scaleX(1) rotate(-1.5deg)}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lede{font-size:clamp(18px,1.4vw,21px);color:#46434D;max-width:44ch;margin:0 0 32px;animation:fade .8s .2s both}
.console{max-width:660px;background:var(--card);border:2px solid var(--ink);border-radius:26px;padding:16px 16px 14px;transition:transform .3s var(--bounce),box-shadow .3s;animation:fade .8s .3s both;box-shadow:6px 6px 0 var(--lilac)}
.console:focus-within{box-shadow:8px 8px 0 var(--sky)}
.chead,.cfoot{display:flex;align-items:center;justify-content:space-between;font:600 13px/1 var(--text);color:var(--mut)}
.console textarea{width:100%;background:transparent;border:0;color:var(--ink);font:500 clamp(19px,1.6vw,22px)/1.4 var(--text);padding:14px 0 8px;resize:none;outline:none;min-height:92px}
.console textarea::placeholder{color:#A9A6AF}
.cfoot{padding-top:6px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;max-width:660px;animation:fade .8s .4s both}
.clab{font:600 14px/1 var(--text);color:var(--mut);margin-right:2px}
.chip{font:500 15px/1.2 var(--text);color:var(--ink);border:0;border-radius:99px;padding:10px 15px;cursor:pointer;text-align:left;transition:transform .25s var(--bounce)}
.chip:nth-of-type(1){background:var(--pink)}.chip:nth-of-type(2){background:var(--sky)}.chip:nth-of-type(3){background:var(--mint)}
.chip:hover{transform:rotate(-2deg) scale(1.04)}
.status{margin-top:16px;font:600 15px/1.5 var(--text);min-height:22px}
.steps{display:flex;gap:6px;margin-top:22px;max-width:660px}.steps[hidden]{display:none}
.steps span{flex:1;height:10px;border-radius:99px;background:#ECEAE4;overflow:hidden;position:relative}
.steps span.on{background:var(--mint)}
.steps span.go:after{content:"";position:absolute;inset:0;background:var(--lemon);animation:fill 1.4s ease-in-out infinite;transform-origin:left}
@keyframes fill{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.err{color:#D2335C}
.result{display:none;margin-top:22px;max-width:660px;align-items:center;gap:18px;background:var(--card);border-radius:var(--r);padding:14px;box-shadow:0 10px 30px -18px rgba(22,21,26,.3)}
.result.on{display:flex;animation:pop .6s var(--bounce) both}.result img{width:96px;height:96px;border-radius:14px;flex:none}
.result b{display:block;font:800 26px/1 var(--disp);letter-spacing:-.02em;margin-bottom:6px}
.result .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.result .btn{padding:11px 16px;font-size:15px}

/* the rail: an endless feed of real games */
.rail{position:relative;height:min(76vh,740px);overflow:hidden;border-radius:32px;background:var(--lilac);animation:fade .9s .15s both}
.rtrack{-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);display:flex;flex-direction:column;padding:0 18px;animation:feed 60s linear infinite}
.rail:hover .rtrack{animation-play-state:paused}
@keyframes feed{to{transform:translateY(-50%)}}
.rpost{margin-top:16px;background:var(--card);border-radius:20px;padding:12px 12px 10px}
.rpost:nth-child(3n+2){transform:rotate(1.2deg)}.rpost:nth-child(3n){transform:rotate(-1deg)}
.rpost header{display:flex;align-items:center;gap:8px;font:500 13px/1 var(--text);color:var(--mut);margin-bottom:10px}
.rpost header img{width:24px;height:24px;border-radius:7px}.rpost header b{color:var(--ink);font-weight:700}
.rpost p{margin:0 0 10px;font-size:15px;line-height:1.35}
.rpost .pic{display:block;width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover;background:#EEE}
.rtag{position:absolute;left:50%;bottom:20px;transform:translateX(-50%) rotate(-3deg);white-space:nowrap;font:700 14px/1 var(--text);background:var(--lemon);color:var(--ink);padding:10px 15px;border-radius:99px;z-index:2;box-shadow:0 6px 16px -6px rgba(22,21,26,.35)}

/* ticker */
.ticker{overflow:hidden;padding:8px 0 10px}
.ticker div{display:flex;align-items:center;gap:14px;width:max-content;animation:tick 30s linear infinite}
.ticker span{font:800 clamp(24px,3vw,40px)/1 var(--disp);letter-spacing:-.03em;padding:14px 24px 16px;border-radius:99px}
.ticker span:nth-of-type(5n+1){background:var(--lemon)}.ticker span:nth-of-type(5n+2){background:var(--pink)}.ticker span:nth-of-type(5n+3){background:var(--sky)}.ticker span:nth-of-type(5n+4){background:var(--mint)}.ticker span:nth-of-type(5n){background:var(--lilac)}
.ticker i{display:none}
@keyframes tick{to{transform:translateX(-50%)}}

/* the post (an X post, dark like the timeline) */
.post{background:#000;border-radius:24px;padding:16px 18px 14px;max-width:540px;font:400 15px/1.4 -apple-system,'Segoe UI',system-ui,sans-serif;color:#e7e9ea;box-shadow:0 30px 60px -30px rgba(22,21,26,.5)}
.post header{display:flex;gap:10px;align-items:center;margin-bottom:6px}.post header b{font-weight:700}
.post .av{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;background:var(--ink)}.post .av img{width:100%;height:100%;display:block}
.post p{margin:0 0 12px}
.post .frame{border-radius:16px;overflow:hidden;aspect-ratio:1/1;background:#111;border:1px solid #2f3336}
.post iframe{display:block;width:100%;height:100%;border:0}
.post footer{font-size:13px;margin-top:8px;color:#71767b}.post .mut{color:#71767b}

/* sections */
section.band{padding:clamp(80px,10vw,150px) var(--pad)}
h2{font:800 clamp(38px,4.8vw,78px)/.95 var(--disp);letter-spacing:-.04em;margin:0 0 40px;max-width:16ch}
h2 em{background:linear-gradient(transparent 58%,var(--pink) 58%,var(--pink) 90%,transparent 90%)}
.live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:center}
.live .stage{position:relative;background:var(--sky);border-radius:36px;padding:clamp(18px,3vw,44px)}
.live .post{margin:0 auto;transform:rotate(-1.5deg);transition:transform .4s var(--bounce)}.live .post:hover{transform:none}
.steps3{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps3 li{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;background:var(--card);border-radius:var(--r);padding:20px;box-shadow:0 10px 30px -20px rgba(22,21,26,.3);transition:transform .3s var(--bounce)}
.steps3 li:hover{transform:rotate(-1deg) scale(1.02)}
.steps3 b{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;font:800 22px/1 var(--disp)}
.steps3 li:nth-child(1) b{background:var(--lemon)}.steps3 li:nth-child(2) b{background:var(--mint)}.steps3 li:nth-child(3) b{background:var(--pink)}
.steps3 h3{font:800 24px/1.1 var(--disp);margin:2px 0 6px;letter-spacing:-.02em}
.steps3 p{margin:0;color:#46434D;max-width:44ch;font-size:17px}
.try{font:600 15px/1 var(--text);color:var(--mut);margin:22px 0 0}
.fhead{display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.gcard{text-decoration:none;display:block;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:0 10px 30px -20px rgba(22,21,26,.35);transition:transform .35s var(--bounce)}
.gcard:nth-child(odd):hover{transform:rotate(-2deg) translateY(-6px)}.gcard:nth-child(even):hover{transform:rotate(2deg) translateY(-6px)}
.gcard img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.gcard div{padding:14px 16px 16px}.gcard b{display:block;font:800 20px/1.1 var(--disp);letter-spacing:-.02em}.gcard span{display:block;font-size:14px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.cta{padding:clamp(40px,6vw,80px) var(--pad) clamp(70px,8vw,120px)}
.cta .lab{display:none}
.huge{display:flex;align-items:center;justify-content:center;gap:.25em;text-decoration:none;background:var(--lemon);border-radius:clamp(28px,4vw,56px);padding:clamp(40px,7vw,110px) 20px;font:800 clamp(44px,8.5vw,150px)/.9 var(--disp);letter-spacing:-.05em;text-align:center;transition:transform .4s var(--bounce),background .3s}
.huge:hover{transform:rotate(-1deg) scale(1.01);background:var(--mint)}
.huge i{font-style:normal;display:inline-block;transition:transform .4s var(--bounce)}.huge:hover i{transform:translate(10px,-10px) rotate(12deg)}
.foot{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:22px var(--pad) 36px;font:500 14px/1.6 var(--text);color:var(--mut)}
.foot img{border-radius:8px}
.foot span:last-child{margin-left:auto}

/* game page */
.gwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(28px,5vw,80px);padding:clamp(20px,3vw,50px) var(--pad) 100px;align-items:start}
.gpost{background:var(--sky);border-radius:36px;padding:clamp(14px,3vw,40px)}
.gpost .post{margin:0 auto}
.gside h1{font:800 clamp(44px,5vw,80px)/.92 var(--disp);letter-spacing:-.04em;margin:0 0 18px}
.quote{font-size:19px;color:#46434D;margin:0 0 26px}.quote .mono{display:block;font:600 14px var(--text);color:var(--mut);margin-bottom:4px}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.lb{margin-bottom:16px}
.lb ol{list-style:none;margin:0;padding:0;font:600 16px/1 var(--text)}
.lb li{display:flex;justify-content:space-between;padding:12px 4px;border-bottom:2px dotted var(--line)}
.lb li:last-child{border:0}.lb li:first-child span{background:var(--lemon);padding:3px 10px;border-radius:99px}
#online{color:var(--ink);background:var(--mint);border-radius:99px;padding:4px 10px;font-size:12px}#online:empty{display:none}
.remix textarea{width:100%;background:var(--bg);border:2px solid var(--line);border-radius:16px;color:var(--ink);font:500 17px/1.4 var(--text);padding:14px;resize:vertical;outline:none;margin-bottom:14px}
.remix textarea:focus{border-color:var(--ink)}

@media (max-width:960px){
  .hero,.gwrap,.live{grid-template-columns:1fr}
  .rail{height:440px}
  .live .how{order:-1}
  .try{display:none}
  .foot span:last-child{margin-left:0}
}
.tapbar{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:#fff;padding:9px 16px;font:600 13px/1 var(--text);position:relative;z-index:3}
.tapbar b{background:var(--lemon);color:var(--ink);padding:5px 10px;border-radius:99px}
.tapbar .tcl{opacity:.6}
.tapbar code{font:500 12px/1 var(--mono);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tapbar button,.tapbar a{font:700 12px/1 var(--text);color:var(--ink);background:#fff;border:0;border-radius:99px;padding:6px 11px;cursor:pointer;text-decoration:none;flex:none}
.tapbar button:hover{background:var(--lemon)}.tapbar a{background:transparent;color:var(--lemon);padding:6px 2px}
.footca code{color:var(--ink)}
@media (max-width:520px){.tapbar{justify-content:flex-start;gap:8px;padding:8px 12px}.tapbar .tcl{display:none}.footca code{word-break:break-all}.nav{padding:16px}.logo img{height:28px}.navcta{font-size:14px;padding:9px 14px}.cfoot .hint{display:none}.cfoot .btn{width:100%}.steps3 li{grid-template-columns:48px 1fr;padding:16px}.grid{grid-template-columns:1fr 1fr;gap:12px}.gcard div{padding:10px 12px 12px}.gcard b{font-size:16px}.gcard span{font-size:12px}.ticker span{padding:10px 18px 12px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}