:root{--sky-top: #b8e6ff;--sky-bottom: #d6f7e4;--ink: #2d2a4a;--ink-soft: #6b6790;--card-bg: #ffffff;--play: #1fbf6b;--play-dark: #14a259;--font: "Fredoka", "Baloo 2", "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;font-family:var(--font);color:var(--ink);background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%);background-attachment:fixed}body:before,body:after{content:"";position:fixed;border-radius:50%;z-index:0;filter:blur(2px);opacity:.5;pointer-events:none}body:before{width:220px;height:220px;background:#ffe08a;top:-60px;left:-40px;animation:drift 18s ease-in-out infinite}body:after{width:300px;height:300px;background:#ffb3d9;bottom:-100px;right:-80px;animation:drift 22s ease-in-out infinite reverse}@keyframes drift{0%,to{transform:translate(0)}50%{transform:translate(30px,40px)}}.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:32px 20px 64px}.hero{text-align:center;margin:8px 0 36px}.hero__title{font-size:clamp(2.4rem,7vw,4.2rem);margin:0;line-height:1.05;color:var(--ink);text-shadow:0 3px 0 #fff,0 6px 0 rgba(0,0,0,.08);animation:bob 4s ease-in-out infinite}.hero__title .pop{display:inline-block;color:#6c5ce7}.hero__sub{font-size:clamp(1rem,3vw,1.4rem);color:var(--ink-soft);margin:10px 0 0}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px}.card{display:block;position:relative;border-radius:26px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 10px #0000000f,0 14px 26px #2d2a4a24;transform:rotate(var(--tilt));transition:transform .18s ease,box-shadow .18s ease;border:4px solid #fff}.card:hover,.card:focus-visible{transform:rotate(0) translateY(-8px) scale(1.03);box-shadow:0 16px #00000012,0 22px 34px #2d2a4a38;outline:none}.card__thumb{position:relative;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--accent) 55%,white),var(--accent))}.card__shots{position:absolute;inset:0}.card__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:0;animation:shots calc(var(--n) * 3s) linear infinite;animation-delay:calc(var(--i) * 3s)}.card__shot:first-child{opacity:1}@keyframes shots{0%{opacity:0}4%{opacity:1}30%{opacity:1}36%,to{opacity:0}}.card__emoji{font-size:5.2rem;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));animation:wiggle 5s ease-in-out infinite}.card:hover .card__emoji{animation:pop .5s ease}@keyframes wiggle{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(8deg)}to{transform:scale(1)}}.card__title-bar{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(to top,rgba(0,0,0,.68),transparent);transition:opacity .22s ease}.card__title{margin:0;font-size:1.4rem;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}.card__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center;background:color-mix(in srgb,var(--accent) 82%,rgba(0,0,0,.75));opacity:0;transition:opacity .22s ease}.card:hover .card__overlay,.card:focus-within .card__overlay,.card:focus-visible .card__overlay{opacity:1}.card:hover .card__title-bar,.card:focus-within .card__title-bar{opacity:0}.card__blurb{margin:0;font-size:1.02rem;color:#fff;line-height:1.4;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.4)}.card__play{background:var(--play);color:#fff;font-family:var(--font);font-size:1.2rem;font-weight:600;padding:12px 30px;border-radius:999px;box-shadow:0 4px 0 var(--play-dark);transition:transform .1s ease,box-shadow .1s ease}.card:hover .card__play{transform:translateY(-2px);box-shadow:0 6px 0 var(--play-dark)}.card:active .card__play{transform:translateY(2px);box-shadow:0 2px 0 var(--play-dark)}.card--soon{cursor:default}.card--soon .card__thumb{filter:saturate(.6)}.card--soon:hover{transform:rotate(var(--tilt));box-shadow:0 10px #0000000f,0 14px 26px #2d2a4a24}.card--soon:hover .card__emoji{animation:wiggle 5s ease-in-out infinite}.card__soon{background:#ffffffeb;color:var(--ink-soft);font-weight:600;padding:11px 22px;border-radius:999px}.foot{text-align:center;margin-top:48px;color:var(--ink-soft);font-size:.95rem}.foot p{margin:0 0 14px}.support-btn{font-family:var(--font);font-size:1rem;font-weight:600;color:#b8860b;background:#fff7e0;border:2px solid #ffe08a;border-radius:999px;padding:10px 20px;cursor:pointer;box-shadow:0 4px #b8860b40;transition:transform .1s ease,box-shadow .1s ease}.support-btn:hover{transform:translateY(-2px);box-shadow:0 6px #b8860b40}.support-btn:active{transform:translateY(2px);box-shadow:0 2px #b8860b40}.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:#2d2a4a8c;backdrop-filter:blur(2px)}.modal[hidden]{display:none}.modal__card{position:relative;width:min(440px,100%);background:#fff;border-radius:26px;border:5px solid #fff;box-shadow:0 20px 50px #00000059;padding:28px 26px 24px;text-align:center}.modal__close{position:absolute;top:12px;right:14px;border:none;background:transparent;font-size:1.8rem;line-height:1;color:var(--ink-soft);cursor:pointer}.modal__title{margin:4px 0 6px;color:#b8860b;font-size:1.5rem}.modal__ask{margin:0 0 10px;font-weight:600;color:var(--ink)}.modal__body{margin:0 0 18px;color:var(--ink-soft);line-height:1.45;font-size:.98rem}.modal__tiers{display:flex;justify-content:center;gap:10px;margin-bottom:16px}.modal__tier{display:inline-block;min-width:58px;padding:10px 0;border-radius:14px;background:#fff7e0;border:2px solid #ffe08a;color:#b8860b;font-weight:700;text-decoration:none;transition:transform .1s ease}.modal__tier:hover{transform:translateY(-2px)}.modal__cta{display:inline-block;background:var(--play);color:#fff;font-weight:600;font-size:1.1rem;text-decoration:none;padding:12px 28px;border-radius:999px;box-shadow:0 4px 0 var(--play-dark)}.modal__cta:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--play-dark)}.modal__note{margin:14px 0 0;font-size:.85rem;color:var(--ink-soft)}@media (prefers-reduced-motion: reduce){*,body:before,body:after{animation:none!important}.card,.card:hover{transition:none}}