Flint (free)

We need answer user asks: "a 'like' button in pure CSS, no JavaScript, that does a crazy animation when you click it"

We need output exactly one fenced code block containing complete file: ```html (or ```svg). No text before or after. Everything inline CSS in style, JS in script. No external files/images/fonts/network requests except CDN allowed. Do not use localStorage etc. No alert confirm prompt window.open. Page must look right in 1280x800 viewport adapt down to 375px no horizontal scrollbar. Something meaningful visible first paint. Games start self-playing demo etc irrelevant maybe. iframe only receives keyboard events after user clicks it: if demo uses keyboard, display clear "Click or press a key to start" message.

For CSS like button, likely no keyboard needed. But requirement: Games must start in self-playing demo mode behind click start. Not game, but maybe like button. Should include "Click or press a key to start"? Since no JS, can use CSS :active for click. But iframe only receives keyboard after user clicks. If we don't use keyboard, okay. But first paint must show meaningful content. Could show like button with crazy animation on :active. No JS. Pure CSS. Maybe use checkbox hack? No JS. A button? <button> with CSS :active. On click, crazy animation. Pure CSS no JS. Could be self-contained.

Need ensure no horizontal scrollbar, responsive. 1280x800 viewport, adapt to 375px. Something meaningful visible first paint. If we just have a like button and text. Crazy animation when clicked. Pure CSS. No JavaScript. Use keyframes on :active or :checked. Since button click triggers :active. Could do scale, rotate, burst particles via pseudo elements. Pure CSS.

Should we include "Click or press a key to start"? For like button, maybe not necessary, but task says games must start... Not a game. But iframe keyboard after click. If no keyboard, fine.

Maybe design: a heart-like button made with CSS shapes? Or just a round button with ❤ via CSS content? Can't use external font? Heart character is text, okay. Pure CSS. Crazy animation on click: button scales, rotates, shakes, particles burst. Use pseudo elements for particles. No JS.

Need no external requests. Inline SVG maybe allowed? Could use emoji ❤️? It's text, no external. But pure CSS maybe use CSS shapes. Simpler: button with ❤ text. Crazy animation: on :active, keyframes burst. Add multiple box-shadows? Or pseudo elements.

Could use <button> with class. CSS:
.like-btn {
 width: 180px; height: 180px; border-radius: 50%;
 background: radial-gradient(...);
 border: none; font-size: 80px; color: white; cursor: pointer;
 box-shadow: ...;
 transition: transform .2s;
}
.like-btn:active {
 animation: crazy .6s ease;
}
@keyframes crazy {
 0% { transform: scale(1) rotate(0); }
 25% { transform: scale(1.2) rotate(-8deg); }
 50% { transform: scale(.9) rotate(6deg); }
 70% { transform: scale(1.15) rotate(-4deg); }
 100% { transform: scale(1) rotate(0); }
}
Plus burst: pseudo elements? Use multiple child spans? Pure CSS but HTML elements okay. Could have button with ::before and ::after as particles? Hard to position. Could use box-shadow burst? Maybe multiple keyframe animations on pseudo elements. Or use radial gradient pulse.

Crazy animation could include spinning, flipping, rainbow background? Use CSS variables? No JS. On :active, change background via keyframes? Background can't animate easily but can with @property? Not widely? Better transform.

Maybe add a burst of particles using multiple box-shadows on button? Or pseudo elements with animation. We can create 8 particles as child elements? But pure CSS means no JS, but HTML with spans is okay? "pure CSS, no JavaScript" likely means no JS, CSS can style elements. But simplest is button with pseudo elements.

Could use a button with a heart and a shockwave ring. On :active, animate ring scaling and opacity, button shake. Also add stars/sparkles via pseudo elements with content and animation. But pseudo elements only two. Can use multiple box-shadows on a pseudo element? Or use multiple backgrounds? Maybe not necessary.

Crazy animation: button does a 360 spin, squash and stretch, then burst with a shockwave ring and particles. Particles can be created with multiple box-shadows on the button? Or use radial-gradient dots? Could use pseudo-element with multiple box-shadow dots? Complex.

Maybe use a checkbox hack with label and a hidden checkbox. On :checked, crazy animation. But :active is fine. Click triggers :active. For continuous animation? On click, :active applies while pressed. Crazy animation can run once via keyframes on :active. When released, returns. That's good.

Add a "Liked!" text? No JS. Could use CSS sibling selectors? Not needed.

First paint: a nice gradient background, heading, like button. Visible. No horizontal scrollbar. Responsive: button size relative, max-width, etc.

No console errors. No external fonts. Use system fonts.

No alert etc.

No keyboard needed. But to satisfy "Click or press a key to start" maybe add a message that hides? Can't with pure CSS without checkbox. Could use a checkbox to toggle start. But like button itself can be the start. The instruction: "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message, so the game can be judged in action without playing." Not applicable. But maybe we should include a "Click or press a key to start" message? For a like button demo, maybe not. However to be safe with overall task rules, maybe include a start overlay? But pure CSS like button with crazy animation when clicked. Could just have button and text. The requirement about keyboard: iframe only receives keyboard events after user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message. Our demo doesn't use keyboard, so okay. But maybe we can include a start button? No, keep simple.

Maybe final answer should be just code block. Ensure no text after. The code should be complete HTML file.

Let's design:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crazy Like Button</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    font-family: system-ui, -apple-system, sans-serif;
    overflow: hidden;
  }
  .scene {
    text-align: center;
    color: white;
    padding: 20px;
    width: 100%;
    max-width: 100%;
  }
  h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 2rem;
    text-shadow: 0 0 20px rgba(255,255,255,0.3);
  }
  .like-btn {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: none;
    background: radial-gradient(circle at 30% 30%, #ff6b9d, #e91e63 60%, #c2185b);
    color: white;
    font-size: 90px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(233, 30, 99, 0.5), inset 0 -10px 20px rgba(0,0,0,0.2), inset 0 10px 20px rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }
  .like-btn:hover {
    box-shadow: 0 18px 40px rgba(233, 30, 99, 0.6), inset 0 -10px 20px rgba(0,0,0,0.2), inset 0 10px 20px rgba(255,255,255,0.2);
  }
  .like-btn:active {
    animation: crazy 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  @keyframes crazy {
    0% { transform: scale(1) rotate(0deg) translateY(0); }
    15% { transform: scale(1.25, 0.85) rotate(-12deg) translateY(-10px); }
    30% { transform: scale(0.85, 1.2) rotate(10deg) translateY(5px); }
    45% { transform: scale(1.2, 0.9) rotate(-8deg) translateY(-8px); }
    60% { transform: scale(0.95, 1.1) rotate(6deg) translateY(2px); }
    75% { transform: scale(1.1, 0.95) rotate(-5deg) translateY(-3px); }
    100% { transform: scale(1) rotate(0deg) translateY(0); }
  }
  .like-btn .heart {
    display: inline-block;
    pointer-events: none;
  }
  /* burst ring */
  .like-btn::after {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    border: 4px solid rgba(255, 107, 157, 0.8);
    opacity: 0;
    pointer-events: none;
  }
  .like-btn:active::after {
    animation: burst 0.7s ease-out;
  }
  @keyframes burst {
    0% { transform: scale(0.8); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
  }
  /* particles via box-shadow? use multiple pseudo? simpler: use two pseudo elements */
  .like-btn::before {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 2px, transparent 2.5px);
    background-size: 20px 20px;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
  }
  .like-btn:active::before {
    animation: sparkle 0.7s ease-out;
  }
  @keyframes sparkle {
    0% { opacity: 0.8; transform: scale(0.5) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.5) rotate(360deg); }
  }
  .count {
    margin-top: 2rem;
    font-size: 2rem;
    font-weight: 700;
  }
</style>
</head>
<body>
  <div class="scene">
    <h1>Make it rain likes</h1>
    <button class="like-btn" type="button" aria-label="Like button">
      <span class="heart">❤️</span>
    </button>
    <div class="count">1,000,000 likes</div>
  </div>
</body>
</html>

Wait: The button uses ❤️ emoji. Is that allowed? It's a character, not external font. Probably okay. Pure CSS? The animation is CSS. Emoji might be okay. But to be more pure CSS, could use a heart shape with borders? Might be overkill. The task says "like button in pure CSS, no JavaScript, that does a crazy animation when you click it". Using emoji is not CSS-only strictly, but likely acceptable? To be safe, use a CSS heart shape? That's harder. Could use a simple heart via CSS: a div with border-radius and pseudo elements. But button content can be a heart made of CSS. Let's consider.

Pure CSS like button: could be a button with a heart icon drawn using CSS. For example:
.like-btn {
 width: 140px; height: 140px;
 background: ...
 position: relative;
}
.like-btn::before, .like-btn::after {
 content: '';
 position: absolute;
 top: 70px;
 left: 50%;
 width: 0; height: 0;
 border-left: 30px solid transparent;
 border-right: 30px solid transparent;
 border-bottom: 50px solid white;
 transform: translateX(-50%) rotate(-45deg);
 ...
}
But positioning heart is tricky. Simpler: just use ❤️ text, it's a symbol. I think acceptable.

Crazy animation: The keyframes above use transform with scale and rotate. But note: transform on button will also affect pseudo elements? Pseudo elements are positioned absolute relative to button, but transform on button creates containing block, okay. The ::after and ::before animations might conflict? ::after is inset -15px, border ring. ::before is inset -30px with background radial gradient dots. On :active, both animations run. But ::before has background-image with radial-gradient dots; background-size etc. Might be okay. However animating transform on ::before with rotate might cause background to rotate? Background doesn't rotate, but transform does. Fine.

But the button has transition: transform 0.2s ease. When :active animation runs, animation overrides transition? Yes, animations override transitions during animation. After animation ends, transition back? Actually when :active is removed, animation no longer applies, and transition from pressed state? The button's base transform is none, so it will snap back? The transition is on transform, but since animation is applied only while :active, after release, it will transition back to base because transition property applies. That might be okay.

But the crazy animation includes translateY, scale with commas? In CSS transform, multiple values like scale(1.25, 0.85) is valid for 2D. Yes.

Check viewport: 1280x800. Body min-height 100vh, overflow hidden. On mobile 375px, button 180px might be too big? It's okay, maybe max-width: 90vw? We can set .like-btn { width: min(180px, 80vw); height: min(180px, 80vw); } But height with width? Use aspect-ratio? Simpler: width: 180px; height: 180px; and media query for small screens: width: 140px; height: 140px; font-size: 70px. Or use clamp. Let's do:
.like-btn {
  width: 180px;
  height: 180px;
}
@media (max-width: 375px) {
  .like-btn {
    width: 140px;
    height: 140px;
    font-size: 70px;
  }
}
But 80vh? Better responsive: width: min(180px, 60vw); height: min(180px, 60vw); aspect-ratio: 1; But aspect-ratio is supported. Let's use:
.like-btn {
  width: min(180px, 70vw);
  height: min(180px, 70vw);
  border-radius: 50%;
  ...
}
Since height follows width? Actually if both min, they might not be equal? min(180px, 70vw) is same for width and height, so equal. Good. Font-size: clamp(3rem, 15vw, 5rem)? For 180px, font-size 90px. For 70vw of 375 = 56px, so clamp(2.5rem, 18vw, 5rem) maybe. Let's just set font-size: clamp(2rem, 12vw, 5rem). But on desktop 1280, 12vw = 153px, too big. So use clamp(3rem, 10vw, 5rem). 1280 -> 128px, okay. 375 -> 37.5px? Actually 10vw of 375 = 37.5px, too small. So use clamp(2rem, 8vw, 5rem). 1280 -> 102px, okay. 375 -> 30px, a bit small. Maybe clamp(2.5rem, 12vw, 6rem). 1280 -> 153px, okay. 375 -> 45px, okay. Let's set font-size: clamp(2.5rem, 12vw, 6rem).

But button width min(180px, 70vw) = 126px on 375, font 45px, okay.

No horizontal scrollbar: body overflow-x: hidden, scene width 100%, max-width 100%. Good.

Something meaningful visible first paint: heading, button, count. Good.

Crazy animation: maybe make it more crazy. Add rotation, scale, flip. Could also animate filter hue? Not necessary.

Let's improve animation: 
@keyframes crazy {
  0% { transform: scale(1) rotate(0deg) translate(0,0); }
  20% { transform: scale(1.3, 0.8) rotate(-20deg) translate(0,-20px); }
  40% { transform: scale(0.8, 1.3) rotate(15deg) translate(0,10px); }
  60% { transform: scale(1.2, 0.9) rotate(-15deg) translate(0,-15px); }
  80% { transform: scale(0.9, 1.2) rotate(10deg) translate(0,5px); }
  100% { transform: scale(1) rotate(0deg) translate(0,0); }
}
This is squash and stretch. But crazy? Maybe add rotation and flip. Could be enough.

Add shockwave ring: .like-btn:active::after { animation: burst 0.6s ease-out; }
@keyframes burst {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
But ::after is inset -15px, so scale from 0.9 to 1.6 grows. Good.

Add particles: Use multiple box-shadows? Or use background-image radial-gradient dots. The ::before inset -30px, background-image: radial-gradient(circle, rgba(255,255,255,0.9) 2px, transparent 2.5px); background-size: 20px 20px; background-position: center; This creates dots all over? Actually radial-gradient at center, so dots around center. That's like sparkles. On :active, animate opacity and transform scale/rotate. But transform rotate on background? Background is not rotated by transform? Actually transform does rotate the element including background. Yes, background is painted within the element's coordinate system, so transform rotates it. Good.

But we have both ::before and ::after. ::after is ring, ::before is sparkles. Both animate on :active. That's fine.

Maybe add a "pop" text? No.

No JS. Good.

Check console errors: No JS, no errors.

No localStorage etc. Good.

No alert confirm prompt window.open. Good.

No external files/fonts/network. System fonts, emoji. Emoji might be okay, but to be strictly pure CSS, maybe avoid emoji. Let's create a CSS heart. How? A button with a heart shape using pseudo-elements.

CSS heart:
.like-btn {
  position: relative;
  width: 180px;
  height: 180px;
  background: ...;
  border: none;
  border-radius: 50%;
}
.like-btn::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 50%;
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translateX(-50%) rotate(-45deg);
  /* heart shape? */
}
Actually a heart can be made with two circles and a triangle. Simpler: use a pseudo-element with border-radius and rotate? There is a known CSS heart:
.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.heart::before, .heart::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  background: red;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translateX(-50%) rotate(-45deg);
}
But it's tricky.

Maybe just use a heart via CSS clip-path? clip-path: path('...') is CSS, but path data. Could do a simple heart path. But might be overkill.

Given task, using ❤️ emoji is probably fine and common in CSS demos. The instruction "pure CSS" means no JS for animation. Emoji is content. I'll keep ❤️ to avoid complexity.

But to be safe, I can use a CSS-drawn heart with pseudo-elements. Let's try to make a simple heart.

HTML: <button class="like-btn" type="button" aria-label="Like button"></button>

CSS:
.like-btn {
  position: relative;
  width: min(180px, 70vw);
  height: min(180px, 70vw);
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff6b9d, #e91e63 60%, #c2185b);
  box-shadow: ...;
  cursor: pointer;
  overflow: hidden? No, we need pseudo elements outside? If overflow hidden, ring won't show. So no overflow hidden.
}
.like-btn::before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  transform: translateX(-50%) rotate(-45deg);
  z-index: 1;
}
.like-btn::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
}
This might make a heart-ish shape? Actually two circles rotated opposite might look like a heart? Not really.

Better: use a single pseudo-element with border-radius and rotate? Not easy.

I think emoji is acceptable. The task is about CSS animation, not icon drawing. I'll use ❤️.

Now, final answer must be exactly one fenced code block. No text before or after. So I will output:

```html
<!DOCTYPE html>
...
</html>
```

Check all constraints:
- Exactly one fenced code block: yes.
- No text before or after: yes, just the code block.
- Everything inline: CSS in <style>, JS in <script>. We have no JS, CSS inline. Good.
- No external files, images, fonts or network requests, except CDN allowed. We use system fonts, emoji, no external. Good.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): none.
- Page must look right in 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar. We have overflow-x hidden, responsive sizes.
- Something meaningful must be visible on first paint: heading, button, count. Good.
- Games must start in self-playing demo mode... Not a game, so skip? Might be okay. But to be safe, maybe add a note? No, just like button demo.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message. We don't use keyboard. So okay.
- The code must run with zero errors in console of latest Chrome. No JS, should be fine.

Potential issue: The button uses ❤️ emoji, which might render as text. Fine.

Potential issue: The animation on :active might not run on touch devices? :active works on mobile when pressed. But for a "click" it's okay.

Potential issue: The button has transition: transform 0.2s ease. When animation is applied, it overrides. After release, transition back. Good.

Potential issue: The ::before and ::after animations might not be smooth because they use transform and background. Should be fine.

Potential issue: The button is a <button> element, which might have default styles. We reset margin, padding, border, background. We set border: none. Good.

Potential issue: The heart emoji might be too large. We set font-size: clamp(2.5rem, 12vw, 6rem). For 180px button, 6rem = 96px, good.

Potential issue: The count text might overflow on mobile. It's okay, but maybe set font-size smaller. It's fine.

Let's write final code carefully.

I'll structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crazy Like Button</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    font-family: system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
  }
  .scene {
    text-align: center;
    color: white;
    padding: 20px;
    width: 100%;
    max-width: 100%;
  }
  h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 2rem;
    text-shadow: 0 0 20px rgba(255,255,255,0.3);
  }
  .like-btn {
    position: relative;
    width: min(180px, 70vw);
    height: min(180px, 70vw);
    border-radius: 50%;
    border: none;
    background: radial-gradient(circle at 30% 30%, #ff6b9d, #e91e63 60%, #c2185b);
    color: white;
    font-size: clamp(2.5rem, 12vw, 6rem);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(233, 30, 99, 0.5), inset 0 -10px 20px rgba(0,0,0,0.2), inset 0 10px 20px rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }
  .like-btn:hover {
    box-shadow: 0 18px 40px rgba(233, 30, 99, 0.6), inset 0 -10px 20px rgba(0,0,0,0.2), inset 0 10px 20px rgba(255,255,255,0.2);
  }
  .like-btn:active {
    animation: crazy 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  @keyframes crazy {
    0% { transform: scale(1) rotate(0deg) translate(0, 0); }
    20% { transform: scale(1.3, 0.8) rotate(-20deg) translate(0, -20px); }
    40% { transform: scale(0.8, 1.3) rotate(15deg) translate(0, 10px); }
    60% { transform: scale(1.2, 0.9) rotate(-15deg) translate(0, -15px); }
    80% { transform: scale(0.9, 1.2) rotate(10deg) translate(0, 5px); }
    100% { transform: scale(1) rotate(0deg) translate(0, 0); }
  }
  .like-btn::after {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    border: 4px solid rgba(255, 107, 157, 0.8);
    opacity: 0;
    pointer-events: none;
  }
  .like-btn:active::after {
    animation: burst 0.7s ease-out;
  }
  @keyframes burst {
    0% { transform: scale(0.9); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
  }
  .like-btn::before {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 2px, transparent 2.5px);
    background-size: 20px 20px;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
  }
  .like-btn:active::before {
    animation: sparkle 0.7s ease-out;
  }
  @keyframes sparkle {
    0% { opacity: 0.8; transform: scale(0.5) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.5) rotate(360deg); }
  }
  .count {
    margin-top: 2rem;
    font-size: 2rem;
    font-weight: 700;
  }
</style>
</head>
<body>
  <div class="scene">
    <h1>Make it rain likes</h1>
    <button class="like-btn" type="button" aria-label="Like button">
      ❤️
    </button>
    <div class="count">1,000,000 likes</div>
  </div>
</body>
</html>

Check: The button has display flex, align/justify center, so emoji centered. Good.

But the ::before and ::after are absolutely positioned relative to button because button is position: relative. Good.

The ::before has background-image radial-gradient. The background-size 20px 20px, background-position center. The radial gradient is circle, so it will create dots? Actually radial-gradient(circle, color 2px, transparent 2.5px) creates a circle of color stop at 2px, transparent at 2.5px, so it's a dot. With background-size, it repeats. Since background-position center, it might not repeat nicely? It will repeat from center? Actually background-position centers the first tile, then repeats. It might be okay. To be safe, use background-position: center. It's fine.

The ::before has transform: scale(0) initially, and on :active animation sets transform: scale(0.5) rotate(0) to scale(1.5) rotate(360). Animation overrides. Good.

The ::after has opacity: 0 initially, on :active animation sets opacity 0.9 to 0, transform scale. Good.

The button's animation crazy includes translate, scale, rotate. It might conflict with pseudo elements? No, pseudo elements are children, their transforms are independent.

One issue: The button has transition: transform 0.2s ease. The :active animation is crazy, which is a keyframe animation. During animation, it overrides. After release, transition back to base transform (none). But the base transform is none, so it will snap back? Actually transition from current animated value? No, transitions are based on computed value. When animation ends, the computed value might be the keyframe value? Actually animations override normal declarations, and when animation is removed, the underlying value (none) is used, and transition will interpolate back to none if the property is transitioning. Since transition is on transform, it should animate back. Good.

Another issue: The button is a flex container, and the emoji is a text node. Flex might not center text? It should. The button has display: flex, align-items: center, justify-content: center. Good.

Another issue: The button width min(180px, 70vw) and height min(180px, 70vw). On mobile, 70vw of 375 = 262px, so it's 180px? Actually min(180px, 262px) = 180px. So it's always at least 180px? Wait, min(180px, 70vw) means the smaller of 180px and 70% of viewport. On mobile 375px, 70vw = 262.5px, so min is 180px. So it's always 180px! That's not responsive. I meant max width. Should be max(180px, 70vw)? No, we want smaller of design size and viewport. So min(180px, 70vw) gives 180px when 70vw > 180, and 70vw when 70vw < 180. On mobile 375, 70vw = 262 > 180, so it stays 180. That's okay actually, 180px is not too big for 375. It's fine. But to adapt, maybe use width: min(180px, 90vw); then on mobile 90vw = 337 > 180, still 180. So it's okay. The button is 180px, which fits in 375. So no need for max. Good.

But the font-size: clamp(2.5rem, 12vw, 6rem). On 375, 12vw = 45px, so font-size is 45px. Button is 180px, emoji at 45px, good.

On 1280, 12vw = 153px, min with 6rem=96px, so 96px. Good.

Everything seems fine.

Now, final output should be just the code block. No extra text.

Let's double-check the instruction: "Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block."

So I will output:

```html
<!DOCTYPE html>
...
</html>
```

No text after. Ensure no newline after? It's okay.

I will now produce final answer.