:root{--ink:#fff;--mute:rgba(255,255,255,.72)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);font-family:Rubik,system-ui,sans-serif;background:#0d0826;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid #FFE14D;outline-offset:3px}

/* animated backdrop */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(120deg,#1b0c4d,#3b0f6b,#0f2a6e,#4a0e5c);background-size:300% 300%;animation:shift 18s ease-in-out infinite}
@keyframes shift{50%{background-position:100% 50%}}
.bg i{position:absolute;display:block;animation:fly var(--t,12s) ease-in-out infinite alternate}
@keyframes fly{to{transform:translate(var(--x,40px),var(--y,-60px)) rotate(var(--r,90deg))}}
.s1{width:5rem;height:5rem;border-radius:50%;border:1rem solid #FF3D8B;left:6%;top:14%;--t:9s}
.s2{width:3.5rem;height:3.5rem;border-radius:.8rem;background:linear-gradient(135deg,#FFB020,#FF3D8B);right:9%;top:22%;--t:11s;--r:180deg}
.s3{width:4rem;height:3.6rem;background:#18D4F0;clip-path:polygon(50% 0,100% 100%,0 100%);left:14%;bottom:12%;--t:13s}
.s4{width:3.4rem;height:3.4rem;background:#B6F23B;right:14%;bottom:18%;--t:10s;--r:-120deg;clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}
.s5{width:7rem;height:7rem;right:40%;top:6%;background:radial-gradient(circle,#fff 2px,transparent 2.5px) 0 0/16px 16px;opacity:.35;--t:15s}
.s6{width:2.4rem;height:2.4rem;border-radius:50%;background:#FFE14D;left:44%;bottom:6%;--t:8s}

header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem clamp(1.2rem,5vw,3rem)}
.back,.count{padding:.5rem 1rem;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);font-size:.9rem;font-weight:500}
.back:hover{background:rgba(255,255,255,.26)}
main{max-width:76rem;margin:0 auto;padding:1.5rem clamp(1.2rem,5vw,3rem) 4rem}
h1{font:400 clamp(2.8rem,11vw,8rem)/1 Bungee,Rubik,sans-serif;margin:0;letter-spacing:-.02em;text-shadow:0 .06em 0 rgba(0,0,0,.25)}
h1 span{display:inline-block;color:hsl(calc(var(--i)*36) 95% 64%);animation:hop 2.2s ease-in-out infinite;animation-delay:calc(var(--i)*.09s)}
@keyframes hop{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-.14em) rotate(-4deg)}}
.sub{font-size:1.25rem;color:var(--mute);margin:1rem 0 2.5rem}

.grid{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.card{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:1rem 1.1rem 1.1rem;border:0;border-radius:24px;color:#fff;text-align:left;font:inherit;cursor:pointer;overflow:hidden;
  background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 14px 30px -14px var(--a);
  animation:rise .7s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i)*70ms);transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .25s}
@keyframes rise{from{opacity:0;transform:translateY(30px) scale(.9)}}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0,rgba(255,255,255,.4),transparent 55%);pointer-events:none}
.card:hover:not(:disabled){transform:translateY(-8px) rotate(-1.2deg) scale(1.03);box-shadow:0 26px 44px -16px var(--a)}
.card:disabled{cursor:default}
.card.soon{filter:saturate(.8)}
.card b{font:400 1.25rem Bungee,Rubik,sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.card span{font-size:.9rem;opacity:.9;margin:.15rem 0 .8rem}
.card em{margin-top:auto;align-self:flex-start;font-style:normal;font-weight:700;font-size:.8rem;padding:.3rem .8rem;border-radius:999px;background:rgba(10,5,40,.35)}
.card:not(.soon) em::after{content:" \25B6"}

/* mini scenes */
.art{position:relative;height:7.2rem;margin:-.2rem -.3rem .6rem;overflow:hidden}
.art i,.art u,.art s,.art b{position:absolute;display:block;text-decoration:none}
.art-snake i{left:calc(12% + var(--n)*1.75rem);bottom:2.6rem;width:1.5rem;height:1.5rem;border-radius:.45rem;background:#fff;opacity:calc(.5 + var(--n)*.12);animation:wave 1.2s ease-in-out infinite;animation-delay:calc(var(--n)*-.12s)}
@keyframes wave{50%{transform:translateY(-1.2rem)}}
.art-snake u{right:12%;bottom:3rem;width:.95rem;height:.95rem;border-radius:50%;background:#FFE14D;animation:beat .7s ease-in-out infinite alternate}
@keyframes beat{to{transform:scale(1.6)}}
.art-memory i{left:calc(14% + var(--n)*3.6rem);top:1.5rem;width:2.5rem;height:3.4rem;border-radius:.55rem;background:#fff;animation:flip 3s ease-in-out infinite,flipc 3s infinite;animation-delay:calc(var(--n)*.45s)}
@keyframes flip{0%,35%{transform:scaleX(1)}45%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
@keyframes flipc{0%,44%{background:#fff}45%,90%{background:#FFE14D}91%,100%{background:#fff}}
.art-tictactoe{display:grid;grid-template-columns:repeat(3,1fr);width:9rem;margin:.4rem auto .6rem;height:6.4rem}
.art-tictactoe b{position:static;display:grid;place-items:center;font:400 1.8rem Bungee,sans-serif;border:2px solid rgba(255,255,255,.5);animation:pop 3.2s infinite;animation-delay:calc(var(--n)*.4s)}
@keyframes pop{0%,8%{transform:scale(0);opacity:0}22%,82%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
.art-2048{display:flex;gap:.45rem;align-items:center;justify-content:center}
.art-2048 i,.art-minesweeper i{position:static;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.55rem;background:rgba(255,255,255,.93);color:#8a5a00;font:700 1.1rem Rubik,sans-serif;animation:bounce 1.8s ease-in-out infinite;animation-delay:calc(var(--n)*.18s)}
@keyframes bounce{50%{transform:translateY(-.7rem) scale(1.1)}}
.art-pong .p1,.art-pong .p2{top:1rem;width:.55rem;height:2.7rem;border-radius:.3rem;background:#fff;animation:ud 1.6s ease-in-out infinite alternate}
.art-pong .p1{left:9%}.art-pong .p2{right:9%;animation-delay:-.8s}
@keyframes ud{to{transform:translateY(3rem)}}
.art-pong u{left:14%;top:2rem;width:1rem;height:1rem;border-radius:50%;background:#FFE14D;animation:bx 1.6s linear infinite alternate,by .8s ease-in-out infinite alternate}
@keyframes bx{to{left:78%}}@keyframes by{to{margin-top:2.6rem}}
.art-flappy u{left:22%;top:2rem;width:1.7rem;height:1.4rem;border-radius:50%;background:#FFE14D;box-shadow:inset -.35rem 0 0 #FFB020;animation:bob .7s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(1.4rem) rotate(18deg)}}
.art-flappy s{top:0;bottom:0;right:-2rem;width:1.6rem;animation:pipe 2.6s linear infinite;animation-delay:calc(var(--n)*-1.3s)}
.art-flappy s::before,.art-flappy s::after{content:"";position:absolute;left:0;right:0;background:#1ea35a;border:2px solid #0d6b3a;border-radius:.3rem}
.art-flappy s::before{top:0;height:32%}.art-flappy s::after{bottom:0;height:32%}
@keyframes pipe{to{right:115%}}
.art-minesweeper{display:grid;grid-template-columns:repeat(3,2.5rem);gap:.35rem;justify-content:center;align-content:center}
.art-minesweeper i{color:#0b6b66}
.art-breakout i{left:calc(9% + var(--n)*21%);top:.8rem;width:19%;height:1rem;border-radius:.3rem;background:hsl(calc(var(--n)*32 + 10) 95% 62%);animation:brick 3s infinite;animation-delay:calc(var(--n)*.4s)}
@keyframes brick{0%,70%,100%{opacity:1}80%{opacity:.15}}
.art-breakout u{left:20%;bottom:1.5rem;width:.85rem;height:.85rem;border-radius:50%;background:#fff;animation:bx2 1.8s linear infinite alternate,by2 .9s ease-out infinite alternate}
@keyframes bx2{to{left:76%}}@keyframes by2{to{bottom:4.2rem}}
.art-breakout s{bottom:.5rem;left:30%;width:3.4rem;height:.6rem;border-radius:.3rem;background:#fff;animation:pad 1.8s ease-in-out infinite alternate}
@keyframes pad{to{left:56%}}
.art-whack i{left:calc(8% + var(--n)*32%);bottom:.6rem;width:3.2rem;height:1rem;border-radius:50%;background:rgba(0,0,0,.35)}
.art-whack u{left:calc(8% + var(--n)*32% + .5rem);bottom:1.1rem;width:2.2rem;height:2.4rem;border-radius:50% 50% .5rem .5rem;background:#8B5A2B;box-shadow:inset 0 .5rem 0 #A0703C;transform:translateY(4rem);animation:mole 2.4s ease-in-out infinite;animation-delay:calc(var(--n)*.7s)}
@keyframes mole{0%,60%,100%{transform:translateY(4rem)}22%,42%{transform:translateY(0)}}
.art-simon{display:grid;grid-template-columns:repeat(2,3.2rem);gap:.35rem;justify-content:center;align-content:center}
.art-simon i{position:static;width:3.2rem;height:2.7rem;border-radius:.7rem;filter:brightness(.6);animation:lit 2.4s infinite;animation-delay:calc(var(--n)*.6s)}
@keyframes lit{0%,28%,100%{filter:brightness(.6);transform:none}6%,20%{filter:brightness(1.5);transform:scale(1.1)}}
.art-tetris i{left:calc(16% + var(--n)*2.8rem);top:-1.4rem;width:1.3rem;height:1.3rem;border-radius:.25rem;background:hsl(calc(var(--n)*70 + 20) 95% 62%);animation:drop 2.4s ease-in infinite;animation-delay:calc(var(--n)*.5s)}
@keyframes drop{0%{top:-1.4rem}70%,100%{top:4.6rem}}
.art-tetris::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:1.3rem;border-radius:.3rem .3rem 0 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.92) 0 1.3rem,rgba(255,255,255,.4) 1.3rem 2.6rem)}
.art-typing span{position:absolute;left:12%;top:2.6rem;width:0;overflow:hidden;white-space:nowrap;font:700 1.5rem Rubik,sans-serif;border-right:3px solid #FFE14D;animation:type 3.2s steps(9) infinite}
@keyframes type{0%{width:0}55%,88%{width:9ch}100%{width:0}}

.foot{margin:3rem 0 0;color:var(--mute);font-size:.8rem}

/* game stage */
.stage{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(13,8,38,.88);backdrop-filter:blur(8px)}
.stage[hidden]{display:none}
.panel{width:min(94vw,440px);padding:3px;border-radius:24px;background:linear-gradient(135deg,#FF3D8B,#FFB020,#18D4F0,#8B5CF6,#FF3D8B);background-size:300% 300%;animation:shift 6s linear infinite;box-shadow:0 30px 80px -20px #8B5CF6}
.in{background:#150c3d;border-radius:21px;padding:1rem}
.top{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.top h2{margin:0 auto 0 0;font:400 1.3rem Bungee,sans-serif}
.pill{padding:.3rem .8rem;border-radius:999px;background:rgba(255,255,255,.12);font-size:.85rem}.pill b{color:#FFE14D;font-size:1rem}
.top button{border:0;background:#FF3D8B;color:#fff;font:inherit;font-weight:700;padding:.4rem 1rem;border-radius:999px;cursor:pointer}
#board{display:block;width:100%;height:auto;border-radius:14px;touch-action:none;background:#150c3d}
.hint{color:var(--mute);font-size:.85rem;text-align:center;margin:.8rem 0 0}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}}
.card.soon,.card:disabled{opacity:1}

/* how to play */
.cwrap{position:relative}
.how{position:absolute;inset:0;display:flex;flex-direction:column;gap:.7rem;padding:1.2rem 1.3rem;border-radius:14px;background:rgba(21,12,61,.97);overflow:auto;z-index:2}
.how[hidden]{display:none}
.how h3{margin:0;font:400 1.4rem Bungee,sans-serif;color:#FFE14D}
.how .goal{margin:0;font-size:1.05rem;font-weight:500;line-height:1.4}
.how ul{margin:0;padding-left:1.2rem;color:var(--mute);font-size:.92rem;line-height:1.5}
.how li{margin:.25rem 0}
.go{margin-top:auto;border:0;border-radius:14px;padding:.85rem;background:linear-gradient(135deg,#FF3D8B,#FFB020);color:#fff;font:400 1.05rem Bungee,sans-serif;cursor:pointer}
.go:hover{filter:brightness(1.1)}
.top #help{width:2rem;height:2rem;padding:0;border-radius:50%;background:rgba(255,255,255,.16);font-weight:700}
.speed{display:flex;align-items:center;gap:.4rem;margin-top:.2rem}
.speed span{margin-right:auto;font-weight:500;color:var(--mute)}
.speed button{border:2px solid rgba(255,255,255,.25);background:none;color:#fff;font:inherit;font-weight:700;font-size:.9rem;padding:.4rem .9rem;border-radius:999px;cursor:pointer}
.speed button[aria-pressed="true"]{background:#fff;color:#2b1370;border-color:#fff}
.go{margin-top:.6rem}
.how .goal+ul{margin-bottom:auto}