/* Download game CTA. Same boil system: outline redrawn 6x via displacement filters, irregular steps(1,end) jumps. */
.dl{position:relative;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;padding:18px 34px 18px 20px;background:var(--accent);color:var(--text-on-accent);border:0;cursor:pointer;font-family:var(--font-mono);text-align:left;isolation:isolate;transition:background var(--dur-base),color var(--dur-base),box-shadow var(--dur-slow) var(--ease-out),transform var(--dur-fast)}
.dl::before{content:"";position:absolute;inset:-8px;border:2px solid var(--accent);z-index:-1;pointer-events:none;animation:dl-boil 1.1s steps(1,end) infinite;transition:inset var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.dl::after{content:"";position:absolute;inset:0;transform:translate(9px,9px);background:repeating-linear-gradient(135deg,var(--bg-raised) 0 3px,var(--bg-void) 3px 7px);border:1px solid var(--line-strong);z-index:-2;pointer-events:none;animation:dl-boil 1.1s steps(1,end) -.55s infinite;transition:transform var(--dur-base) var(--ease-out)}
@keyframes dl-boil{0%{filter:url(#dl-f1)}14%{filter:url(#dl-f4)}29%{filter:url(#dl-f2)}43%{filter:url(#dl-f6)}57%{filter:url(#dl-f3)}72%{filter:url(#dl-f5)}86%{filter:url(#dl-f1)}}
.dl__ic{position:relative;display:grid;place-items:center;width:52px;height:52px;border:2px solid currentColor;overflow:hidden;flex:none}
.dl__ic .icon{width:28px;height:28px;animation:dl-drop 1.8s steps(7,end) infinite}
@keyframes dl-drop{0%{transform:translateY(-130%)}55%,100%{transform:translateY(0)}}
.dl__txt{display:grid;gap:6px}
.dl__t{font:500 20px/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.dl__s{font:400 11px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;opacity:.82;white-space:nowrap}
.dl__bar{position:absolute;left:0;bottom:0;height:4px;width:var(--p,0%);background:var(--accent);opacity:0;transition:width 160ms steps(2,end)}
.dl__sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.dl__sweep::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text-1) 50%,transparent),transparent);transform:skewX(-18deg) translateX(-100%);animation:dl-sweep 5s steps(1,end) infinite}
@keyframes dl-sweep{0%,70%{transform:skewX(-18deg) translateX(-100%)}72%{transform:skewX(-18deg) translateX(100%)}73%{transform:skewX(-18deg) translateX(520%)}73.1%,100%{transform:skewX(-18deg) translateX(-100%)}}
.dl{animation:dl-hum 6s steps(1,end) infinite}
@keyframes dl-hum{0%,100%{box-shadow:0 0 26px color-mix(in srgb,var(--accent) 22%,transparent)}41%{box-shadow:0 0 26px color-mix(in srgb,var(--accent) 22%,transparent)}42%{box-shadow:0 0 8px color-mix(in srgb,var(--accent) 5%,transparent)}43%{box-shadow:0 0 38px color-mix(in srgb,var(--accent) 40%,transparent)}44%{box-shadow:0 0 14px color-mix(in srgb,var(--accent) 10%,transparent)}45%{box-shadow:0 0 26px color-mix(in srgb,var(--accent) 22%,transparent)}}
.dl:hover,.dl.is-hover{background:var(--accent-hover);animation:none;box-shadow:0 0 56px color-mix(in srgb,var(--accent) 42%,transparent)}
.dl:hover::before,.dl.is-hover::before{inset:-12px}
.dl:hover::after,.dl.is-hover::after{transform:translate(13px,13px)}
.dl:hover .dl__t,.dl.is-hover .dl__t{animation:glitch 1.4s steps(1,end) infinite;text-shadow:2px 0 color-mix(in srgb,var(--cat-dreamcore) 55%,transparent),-2px 0 color-mix(in srgb,var(--dream) 45%,transparent)}
.dl:hover .dl__ic .icon,.dl.is-hover .dl__ic .icon{animation-duration:.8s}
.dl:active{transform:translate(3px,3px)}.dl:active::after{transform:translate(5px,5px)}
.dl:focus-visible{outline:2px solid var(--dream);outline-offset:14px}
.dl--busy{background:var(--bg-raised);color:var(--accent);pointer-events:none;animation:none;box-shadow:var(--glow-accent)}
.dl--busy .dl__bar{opacity:1}.dl--busy .dl__ic .icon{animation-duration:.7s}
.dl--busy .dl__t{animation:blink 1.2s steps(1,end) infinite}
.dl--done{background:var(--dream);color:var(--text-on-accent);animation:none;box-shadow:var(--glow-dream)}
.dl--done::before{border-color:var(--dream)}.dl--done:hover{background:var(--dream)}.dl--done .dl__ic .icon{animation:none}
.dl--sm{gap:10px;padding:9px 16px 9px 12px}.dl--sm::before{inset:-4px;border-width:1.5px}.dl--sm::after{transform:translate(4px,4px)}
.dl--sm:hover::before{inset:-6px}.dl--sm:hover::after{transform:translate(6px,6px)}
.dl--sm .dl__ic{width:26px;height:26px;border-width:1.5px}.dl--sm .dl__ic .icon{width:16px;height:16px}
.dl--sm .dl__t{font-size:12px;letter-spacing:.18em}.dl--sm .dl__s{display:none}
@media (max-width:560px){.dl__t{font-size:15px;letter-spacing:.16em}.dl{padding-right:22px}}
.dl__rec{position:absolute;left:-8px;top:-30px;display:flex;gap:7px;align-items:center;font:500 11px/1 var(--font-mono);letter-spacing:.2em;color:var(--text-2);pointer-events:none}
.dl__rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal-danger);animation:blink 1.2s steps(1,end) infinite}
.dl--sm .dl__rec,.dl--busy .dl__rec,.dl--done .dl__rec{display:none}
.dl__drips{position:absolute;left:0;right:0;bottom:-2px;height:0;pointer-events:none}
.dl__drips i{position:absolute;top:0;width:3px;height:14px;background:var(--accent);opacity:0}
.dl__drips i:nth-child(1){left:18%}.dl__drips i:nth-child(2){left:47%}.dl__drips i:nth-child(3){left:81%}
.dl:hover .dl__drips i,.dl.is-hover .dl__drips i{animation:dl-drip 1.6s steps(8,end) infinite}
.dl__drips i:nth-child(2){animation-delay:.5s!important}.dl__drips i:nth-child(3){animation-delay:1s!important}
@keyframes dl-drip{0%{opacity:0;transform:translateY(8px) scaleY(.3)}15%{opacity:1;transform:translateY(12px) scaleY(1)}100%{opacity:0;transform:translateY(64px) scaleY(1.6)}}
.dl--busy .dl__drips,.dl--done .dl__drips{display:none}

@media (prefers-reduced-motion:reduce){.dl,.dl::before,.dl::after,.dl__ic .icon,.dl__sweep::after,.dl__t,.dl__rec::before,.dl__drips i{animation:none!important;filter:none!important}.dl__drips{display:none}}