.mini-game{--mg-accent:var(--accent,#ffc968);position:relative;border:1px solid #ffffff2a;background:#121619;color:#f3f1e9;padding:clamp(20px,4vw,60px);margin:80px auto;max-width:1400px;overflow:hidden}.mini-game h2{font-size:clamp(30px,5vw,65px);line-height:1.04;margin:16px 0;max-width:850px}.mini-game p{max-width:670px;line-height:1.6}.mg-top{display:flex;justify-content:space-between;gap:20px;font:11px monospace;letter-spacing:.13em}.mini-game a{color:inherit}.mg-field{min-height:300px;position:relative;display:flex;align-items:center;justify-content:center;gap:20px;margin:30px 0;background:radial-gradient(ellipse at center,#ffffff0b,transparent 70%);isolation:isolate}.mg-field button,.mg-controls button,.mg-replay{font:inherit;color:inherit;background:#ffffff08;border:1px solid #ffffff40;cursor:pointer;min-height:48px;padding:12px 20px;transition:background .25s,transform .3s}.mini-game button:focus-visible,.mini-game input:focus-visible{outline:3px solid var(--mg-accent);outline-offset:5px}.mg-field svg,.mg-controls svg{width:60px;height:60px;display:block}.mg-controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.mg-controls label{display:flex;align-items:center;gap:20px;width:min(500px,100%)}.mg-controls input{flex:1;min-width:0;accent-color:var(--mg-accent)}.mg-status{min-height:3.2em!important;margin:24px auto 12px!important;text-align:center;font-size:15px!important}.mg-replay{display:block;margin:auto}.mg-orb,.mg-target{position:absolute;left:23%;top:70%;transform:translate(-50%,-50%);padding:0!important;border-radius:50%;width:70px;height:70px;background:var(--mg-accent)!important;color:#121619!important;touch-action:none;z-index:2}.mg-target{left:76%;top:30%;background:transparent!important;color:var(--mg-accent)!important;width:95px;height:95px;border:1px dashed currentColor!important;display:grid;place-items:center;box-shadow:0 0 60px #ffd07516}.mg-orb svg{margin:auto}.mg-space{background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:35px 35px}.mg-space:after{content:'';position:absolute;bottom:0;height:2px;left:0;right:0;background:linear-gradient(90deg,transparent,var(--mg-accent),transparent);transition:bottom .7s}.mg-space.inverted:after{bottom:100%}.mg-align{position:relative;width:190px;height:190px;perspective:600px}.mg-align span{position:absolute;inset:12px;border:2px dashed var(--mg-accent);transform:rotate(45deg)}.mg-align .mg-turn{border:2px solid #ffffff;background:#ffffff0a;transform:rotate(0)}[data-mini-game=odd] .mg-field{display:grid;grid-template-columns:repeat(3,90px);gap:14px}.mg-tile{padding:8px!important;border:0!important}.mg-slots{display:flex;gap:24px}.mg-slots>span{padding:14px;opacity:.4;border:1px dashed #ffffff55;transition:transform .4s}.mg-slots .active{opacity:1;color:var(--mg-accent);transform:translateY(-12px)}.mg-route-card{background:var(--mg-accent);color:#131719;padding:40px 55px;font-size:32px;font-weight:700;transform:rotate(-6deg);box-shadow:18px 20px 0 #ffffff0b;transition:rotate .5s}.mg-network{justify-content:space-between;padding:0 12%}.mg-nodes{display:grid;gap:16px}.mg-node{border-radius:50%!important;padding:3px!important}.selected{outline:2px solid var(--mg-accent)}.mg-story{display:grid;gap:35px;text-align:left;width:27%;min-height:190px!important;transform:rotate(-4deg)}.mg-story:nth-child(2){transform:rotate(5deg) translateY(-20px)}.mg-story small{font:12px monospace}.mg-story strong{font-size:clamp(15px,3vw,30px)}.mg-pad{height:130px;aspect-ratio:1;border-radius:50%;font-size:35px!important}.mini-game .correct{background:var(--mg-accent)!important;color:#101719!important;opacity:1!important;box-shadow:0 0 35px #ffffff20}.mg-won{border-color:var(--mg-accent)}.mg-won .mg-field{background-color:#ffd07508}.mg-spark{position:absolute;left:50%;top:50%;width:8px;height:8px;background:var(--mg-accent);z-index:4;pointer-events:none;animation:mg-reward 1.3s both;--a:calc(var(--n)*20deg)}@keyframes mg-reward{from{transform:rotate(var(--a)) translateX(0) scale(0)}to{transform:rotate(var(--a)) translateX(clamp(100px,20vw,290px)) rotate(120deg) scale(.5);opacity:0}}[data-mini-game=blocks].mg-won .mg-slots{animation:mg-stack .8s both}[data-mini-game=align].mg-won .mg-align{animation:mg-stack 1s both}[data-mini-game=route].mg-won .mg-route-card{transform:rotate(0deg) translateY(-20px)}@keyframes mg-stack{50%{transform:rotateY(180deg) translateY(-30px)}to{transform:rotateY(360deg)}}@media(max-width:600px){.mini-game{margin:45px 0;padding:22px 18px}.mg-field{gap:10px;min-height:280px}.mg-pad{width:57px;height:90px;padding:4px!important}.mg-slots{gap:8px}.mg-slots>span{padding:4px}.mg-story{padding:10px!important;width:31%}.mg-network{padding:0 8%}.mg-top{font-size:10px}.mg-orb{width:60px;height:60px}.mg-controls button{padding:10px 15px}}@media(prefers-reduced-motion:reduce){.mini-game *{animation:none!important;transition:none!important}.mg-spark{display:none}.mg-won .mg-status{color:var(--mg-accent)}}

.mini-game{scroll-margin-top:150px}.mg-won[data-mini-game=rhythm] .mg-pad{animation:mg-beat .7s ease both}.mg-won[data-mini-game=rhythm] .mg-pad:nth-child(2){animation-delay:.15s}.mg-won[data-mini-game=rhythm] .mg-pad:nth-child(3){animation-delay:.3s}.mg-won[data-mini-game=rhythm] .mg-pad:nth-child(4){animation-delay:.45s}.mg-won[data-mini-game=odd] .mg-tile:not(.correct){opacity:.13;transform:scale(.65)}.mg-won[data-mini-game=odd] .mg-tile.correct{transform:scale(1.3)}.mg-won[data-mini-game=connect] .mg-network{background:repeating-linear-gradient(30deg,transparent 0 38px,#76c9ff30 39px 40px,transparent 41px 80px)}.mg-won[data-mini-game=connect] .mg-node{animation:mg-beat .9s both}.mg-won[data-mini-game=order] .mg-story{transform:rotate(0) translateY(-25px);box-shadow:0 20px 0 #f2c37718}.mg-won[data-mini-game=gravity] .mg-space{animation:mg-gravity 1.3s both}.mg-won[data-mini-game=dock] .mg-target{box-shadow:0 0 0 18px #71decf18,0 0 0 38px #71decf0b,0 0 90px #71decf33}@keyframes mg-beat{50%{transform:translateY(-25px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes mg-gravity{50%{transform:perspective(600px) rotateX(12deg) rotateY(-8deg)}to{transform:perspective(600px) rotateX(0) rotateY(0)}}@media(prefers-reduced-motion:reduce){.mini-game *{animation:none!important;transition:none!important}}