export function PixelRevealButton() {
  return (
    <div className="bg-[#0c0c0c] p-12 grid place-items-center">
      <style>{`
        .pixel-btn {
          position: relative;
          overflow: hidden;
          background: #1a1a1a;
          color: #f3f4f6;
          font-family: var(--font-geist-mono), ui-monospace, monospace;
          border: 1px solid #2a2a2a;
          transition: color .3s ease;
        }
        .pixel-btn::before {
          content: "";
          position: absolute;
          inset: 0;
          background:
            linear-gradient(#22c55e 50%, transparent 50%),
            linear-gradient(90deg, #22c55e 50%, transparent 50%);
          background-size: 6px 6px, 6px 6px;
          background-position: 0 0, 0 0;
          opacity: 0;
          transition: opacity .25s steps(6);
          pointer-events: none;
          mix-blend-mode: lighten;
        }
        .pixel-btn::after {
          content: "";
          position: absolute;
          inset: 0;
          background:
            repeating-linear-gradient(0deg,
              #22c55e 0 6px, transparent 6px 12px),
            repeating-linear-gradient(90deg,
              #22c55e 0 6px, transparent 6px 12px);
          clip-path: inset(100% 0 0 0);
          transition: clip-path .35s steps(8);
          pointer-events: none;
          opacity: 0.85;
          mix-blend-mode: screen;
        }
        .pixel-btn:hover { color: #052e16; }
        .pixel-btn:hover::after { clip-path: inset(0 0 0 0); }
        .pixel-btn:active { transform: scale(.97); }
      `}</style>
      <button
        type="button"
        className="pixel-btn px-7 py-3 rounded-none text-[13px] uppercase tracking-[0.18em]"
      >
        <span className="relative z-10">▣ Load level</span>
      </button>
    </div>
  );
}
Pixel Reveal Button
