:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#fff;background:#10152f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}button{font:inherit}.letters-game{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(circle at 18% 18%,rgb(255 79 154 / 48%) 0 150px,transparent 151px),radial-gradient(circle at 82% 16%,rgb(38 167 255 / 42%) 0 170px,transparent 171px),radial-gradient(circle at 72% 82%,rgb(41 191 99 / 38%) 0 190px,transparent 191px),linear-gradient(135deg,#10152f,#312169 48%,#0f766e);touch-action:none;-webkit-user-select:none;user-select:none}.letters-game:before{position:absolute;inset:0;pointer-events:none;content:"";background-image:linear-gradient(rgb(255 255 255 / 8%) 2px,transparent 2px),linear-gradient(90deg,rgb(255 255 255 / 8%) 2px,transparent 2px);background-size:72px 72px;-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 74%);mask-image:radial-gradient(circle,#000 0%,transparent 74%)}.letters-stage{position:absolute;inset:0;overflow:hidden}.start-button{position:absolute;top:50%;left:50%;min-width:min(76vw,520px);min-height:min(34vh,240px);padding:34px 52px;border:8px solid rgb(255 255 255 / 76%);border-radius:8px;color:#fff;background:radial-gradient(circle at 20% 24%,rgb(255 255 255 / 34%) 0 42px,transparent 43px),linear-gradient(135deg,#ff4f9a,#ffbf22 48%,#29bf63);box-shadow:0 32px 80px #00000042,inset 0 -10px #0000001f;font-size:clamp(72px,16vw,176px);font-weight:1000;line-height:.9;letter-spacing:0;cursor:pointer;transform:translate(-50%,-50%) rotate(-3deg);transition:transform .16s ease,box-shadow .16s ease}.start-button:hover{transform:translate(-50%,-52%) rotate(2deg) scale(1.03);box-shadow:0 40px 96px #00000047,inset 0 -10px #0000001f}.start-button:focus-visible{outline:8px solid #ffffff;outline-offset:8px}.letters-game.is-playing .start-button{display:none}.floating-item{position:absolute;display:grid;width:var(--item-size);height:var(--item-size);place-items:center;border-radius:8px;color:#fff;font-size:var(--font-size);font-weight:1000;line-height:1;text-shadow:0 5px 0 rgb(0 0 0 / 10%),0 18px 26px rgb(0 0 0 / 24%);transform:translate(-50%,-50%) rotate(var(--rotation));will-change:transform,opacity}.floating-item--pink{background:linear-gradient(135deg,#ff4f9a,#ff7bc8)}.floating-item--blue{background:linear-gradient(135deg,#26a7ff,#50d5ff)}.floating-item--green{background:linear-gradient(135deg,#29bf63,#9bf04a)}.floating-item--yellow{background:linear-gradient(135deg,#ffbf22,#ffe45c)}.floating-item--purple{background:linear-gradient(135deg,#7457ff,#b26bff)}.floating-item--orange{background:linear-gradient(135deg,#ff7a1a,#ffb347)}.floating-item--cyan{background:linear-gradient(135deg,#00c2ff,#3ff5e8)}.floating-item--lime{background:linear-gradient(135deg,#a3e635,#4ade80)}.floating-item--big,.floating-item--burst{border:7px solid rgb(255 255 255 / 70%);box-shadow:0 22px 52px #00000038}.floating-item--pop{animation:pop-away 1.9s cubic-bezier(.2,.9,.2,1) forwards}.floating-item--jump{animation:jump-away 2s cubic-bezier(.18,.9,.22,1) forwards}.floating-item--spin{animation:spin-away 2.05s cubic-bezier(.2,.85,.2,1) forwards}.floating-item--fall{animation:fall-away 2.1s cubic-bezier(.2,.85,.25,1) forwards}.floating-item--zoom{animation:zoom-away 1.85s cubic-bezier(.18,.9,.2,1) forwards}.floating-item--swing{animation:swing-away 2.15s cubic-bezier(.2,.85,.2,1) forwards}.floating-item--spring{animation:spring-away 1.95s cubic-bezier(.17,.95,.25,1) forwards}.floating-item--side{animation:side-away 2.05s cubic-bezier(.18,.88,.2,1) forwards}.floating-item--bounce{animation:bounce-fall-away 2.15s cubic-bezier(.18,.9,.22,1) forwards}.floating-item--stamp{animation:stamp-away 1.85s cubic-bezier(.2,.86,.18,1) forwards}.floating-item--rocket{animation:rocket-away 1.95s cubic-bezier(.2,.82,.22,1) forwards}.sparkle{position:absolute;display:grid;width:var(--sparkle-size);height:var(--sparkle-size);place-items:center;pointer-events:none;font-size:var(--sparkle-size);line-height:1;text-shadow:0 6px 18px rgb(0 0 0 / 22%);transform:translate(-50%,-50%);will-change:transform,opacity;animation:sparkle-splash .6s cubic-bezier(.16,.8,.28,1) forwards}.sparkle--pink{color:#ff8ac5}.sparkle--blue{color:#62dcff}.sparkle--green{color:#a8ff6b}.sparkle--yellow{color:#ffe45c}.sparkle--purple{color:#c7a3ff}.sparkle--orange{color:#ffb347}.trail-sparkle{animation:trail-sparkle-fall 1.6s cubic-bezier(.18,.72,.3,1) forwards}.perf-low .sparkle{text-shadow:none}.perf-low .trail-sparkle{animation-duration:1.2s}@keyframes pop-away{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(var(--rotation))}18%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(calc(var(--rotation) * -1))}to{opacity:0;transform:translate(calc(-50% + var(--travel-x)),calc(-50% + var(--travel-y))) scale(.82) rotate(22deg)}}@keyframes jump-away{0%{opacity:0;transform:translate(-50%,40%) scale(.5) rotate(var(--rotation))}24%{opacity:1;transform:translate(-50%,-72%) scale(1.06) rotate(calc(var(--rotation) + 12deg))}58%{transform:translate(-50%,-34%) scale(.98) rotate(calc(var(--rotation) - 10deg))}to{opacity:0;transform:translate(calc(-50% + var(--travel-x)),calc(-50% + 90px)) scale(.6) rotate(28deg)}}@keyframes spin-away{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-180deg)}22%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--travel-x)),calc(-50% + var(--travel-y))) scale(.75) rotate(540deg)}}@keyframes fall-away{0%{opacity:0;transform:translate(-50%,-190%) scale(.8) rotate(var(--rotation))}20%{opacity:1}62%{transform:translate(-50%,-50%) scale(1.05) rotate(calc(var(--rotation) + 16deg))}to{opacity:0;transform:translate(calc(-50% + var(--travel-x)),120%) scale(.72) rotate(-32deg)}}@keyframes zoom-away{0%{opacity:0;transform:translate(-50%,-50%) scale(.05) rotate(var(--rotation))}28%{opacity:1;transform:translate(-50%,-50%) scale(1.28) rotate(calc(var(--rotation) + 8deg))}to{opacity:0;transform:translate(calc(-50% + var(--travel-x)),calc(-50% + var(--travel-y))) scale(.15) rotate(-24deg)}}@keyframes swing-away{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-34deg)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(28deg)}42%{transform:translate(-50%,-50%) scale(1) rotate(-18deg)}to{opacity:0;transform:translate(calc(-50% + var(--travel-x)),calc(-50% + var(--travel-y))) scale(.72) rotate(38deg)}}@keyframes spring-away{0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(var(--rotation))}16%{opacity:1;transform:translate(-50%,-50%) scale(1.28,.76) rotate(calc(var(--rotation) - 8deg))}32%{transform:translate(-50%,-50%) scale(.82,1.2) rotate(calc(var(--rotation) + 12deg))}48%{transform:translate(-50%,-50%) scale(1.04,.98) rotate(calc(var(--rotation) - 4deg))}to{opacity:0;transform:translate(calc(-50% + var(--travel-x)),calc(-50% + var(--travel-y))) scale(.74) rotate(26deg)}}@keyframes side-away{0%{opacity:0;transform:translate(calc(-50% + var(--travel-x) * -2.4),-50%) scale(.72) rotate(-62deg)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(calc(var(--rotation) + 18deg))}54%{transform:translate(calc(-50% + var(--travel-x) * .15),-50%) scale(.98) rotate(calc(var(--rotation) - 10deg))}to{opacity:0;transform:translate(calc(-50% + var(--travel-x)),calc(-50% + var(--travel-y))) scale(.72) rotate(34deg)}}@keyframes bounce-fall-away{0%{opacity:0;transform:translate(-50%,-210%) scale(.86) rotate(var(--rotation))}20%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(calc(var(--rotation) + 10deg))}34%{transform:translate(-50%,-92%) scale(.96) rotate(calc(var(--rotation) - 10deg))}52%{transform:translate(-50%,-50%) scale(1) rotate(calc(var(--rotation) + 6deg))}to{opacity:0;transform:translate(calc(-50% + var(--travel-x)),112%) scale(.66) rotate(-38deg)}}@keyframes stamp-away{0%{opacity:0;transform:translate(-50%,-50%) scale(2.15) rotate(var(--rotation));filter:blur(8px)}14%{opacity:1;transform:translate(-50%,-50%) scale(.86) rotate(calc(var(--rotation) - 6deg));filter:blur(0)}26%{transform:translate(-50%,-50%) scale(1.08) rotate(calc(var(--rotation) + 4deg))}to{opacity:0;transform:translate(calc(-50% + var(--travel-x)),calc(-50% + var(--travel-y))) scale(.82) rotate(-18deg)}}@keyframes rocket-away{0%{opacity:0;transform:translate(calc(-50% - 70px),calc(-50% + 180px)) scale(.42) rotate(-28deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(calc(var(--rotation) + 18deg))}to{opacity:0;transform:translate(calc(-50% + var(--travel-x) + 120px),calc(-50% + var(--travel-y) - 150px)) scale(.62) rotate(34deg)}}@keyframes sparkle-splash{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}22%{opacity:1;transform:translate(calc(-50% + var(--sparkle-x) * .3),calc(-50% + var(--sparkle-y) * .3)) scale(1.08) rotate(calc(var(--sparkle-rotation) * .35))}to{opacity:0;transform:translate(calc(-50% + var(--sparkle-x)),calc(-50% + var(--sparkle-y))) scale(.32) rotate(var(--sparkle-rotation))}}@keyframes trail-sparkle-fall{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}16%{opacity:1;transform:translate(calc(-50% + var(--trail-x) * .16),calc(-50% + 18px)) scale(1) rotate(calc(var(--trail-rotation) * .15))}72%{opacity:.72}to{opacity:0;transform:translate(calc(-50% + var(--trail-x)),calc(-50% + var(--trail-y))) scale(.36) rotate(var(--trail-rotation))}}@media(max-width:620px){.start-button{min-width:82vw;min-height:190px}}
