class AchievementCard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          perspective: 1000px;
        }
        .card {
          background: linear-gradient(145deg, #1a1a2e, #16213e);
          border-radius: 16px;
          padding: 2rem;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
          transition: all 0.5s ease;
          transform-style: preserve-3d;
          position: relative;
          overflow: hidden;
        }
        .card:hover {
          transform: translateY(-10px) rotateX(5deg);
          box-shadow: 0 15px 35px rgba(100, 65, 165, 0.4);
        }
        .card::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
          transform: rotate(45deg);
          transition: all 0.5s ease;
        }
        .card:hover::before {
          transform: rotate(45deg) translate(20px, 20px);
        }
        .trophy {
          font-size: 3rem;
          color: #fbbf24;
          text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
          margin-bottom: 1rem;
          transition: all 0.3s ease;
        }
        .card:hover .trophy {
          transform: scale(1.1);
        }
        h3 {
          font-family: 'Orbitron', sans-serif;
          color: white;
          margin: 0 0 0.5rem 0;
          font-size: 1.5rem;
        }
        p {
          color: #a1a1aa;
          margin: 0;
          line-height: 1.6;
        }
        .date {
          color: #818cf8;
          font-size: 0.9rem;
          margin-top: 1rem;
          display: inline-block;
        }
      </style>
      <div class="card">
        <div class="trophy">🏆</div>
        <h3>${this.getAttribute('title')}</h3>
        <p>${this.getAttribute('description')}</p>
        <span class="date">${this.getAttribute('date')}</span>
      </div>
    `;
  }
}
customElements.define('achievement-card', AchievementCard);