/* ================ Starlight Dojo CSS ================ */
/* Base Styles */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
    --primary-color: #8e44ad;
    --secondary-color: #3498db;
    --accent-color: #f39c12;
    --background-light: #f0f4f8;
    --background-medium: #e0e7ff;
    --text-dark: #2c3e50;
    --text-light: #ecf0f1;
    --shadow-soft: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.15);
    --shadow-hard: 0 15px 50px rgba(0, 0, 0, 0.2);
    --transition-fast: all 0.3s ease;
    --transition-medium: all 0.5s ease;
    --transition-slow: all 0.8s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: 'Quicksand', sans-serif;
    background: var(--background-light);
    color: var(--text-dark);
    overflow-x: hidden;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    line-height: 1.3;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

button {
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    display: block;
}

/* Animation Keyframes */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(142, 68, 173, 0.6); }
    50% { box-shadow: 0 0 20px rgba(142, 68, 173, 0.9); }
    100% { box-shadow: 0 0 5px rgba(142, 68, 173, 0.6); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navigation Styles */
.starlightdojo-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: rgba(240, 244, 248, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-medium);
}

.starlightdojo-nav-logo img {
    height: 40px;
}

.starlightdojo-nav-links {
    display: flex;
    gap: 25px;
}

.starlightdojo-nav-link {
    font-weight: 500;
    position: relative;
    padding: 5px 0;
}

.starlightdojo-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: var(--transition-fast);
}

.starlightdojo-nav-link:hover::after,
.starlightdojo-nav-link.active::after {
    width: 100%;
}

.starlightdojo-nav-social {
    display: flex;
    gap: 15px;
}

.starlightdojo-nav-social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: var(--text-light);
    border-radius: 50%;
    transition: var(--transition-fast);
}

.starlightdojo-nav-social-link:hover {
    transform: translateY(-3px);
    background-color: var(--secondary-color);
    box-shadow: var(--shadow-medium);
}

/* Hero Section Styles */
.starlightdojo-hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

.starlightdojo-hero-parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.starlightdojo-parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.starlightdojo-layer-1 {
    background-image: url('https://via.placeholder.com/1920x1080');
    opacity: 0.2;
    transform: translateZ(-5px) scale(1.5);
}

.starlightdojo-layer-2 {
    background-image: url('https://via.placeholder.com/1920x1080');
    opacity: 0.4;
    transform: translateZ(-10px) scale(2);
}

.starlightdojo-layer-3 {
    background-image: url('https://via.placeholder.com/1920x1080');
    opacity: 0.6;
    transform: translateZ(-15px) scale(2.5);
}

.starlightdojo-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: var(--text-light);
    max-width: 800px;
    padding: 0 20px;
    animation: fadeInUp 1s ease-out forwards;
}

.starlightdojo-hero-title {
    font-size: 5rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.starlightdojo-hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.starlightdojo-hero-button {
    display: inline-block;
    padding: 15px 40px;
    background: var(--accent-color);
    color: var(--text-light);
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: var(--shadow-medium);
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.starlightdojo-hero-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    transition: var(--transition-medium);
    z-index: -1;
    border-radius: 50px;
}

.starlightdojo-hero-button:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hard);
}

.starlightdojo-hero-button:hover::before {
    width: 100%;
}

/* Section Styles */
section {
    padding: 100px 5%;
}

.starlightdojo-section-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 60px;
    color: var(--primary-color);
    position: relative;
}

.starlightdojo-section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 3px;
}

/* Games Section Styles */
.starlightdojo-games {
    background: var(--background-medium);
    position: relative;
    overflow: hidden;
}

.starlightdojo-games::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://via.placeholder.com/1920x1080') center/cover no-repeat;
    opacity: 0.05;
    z-index: 1;
}

.starlightdojo-games-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.starlightdojo-game-card {
    position: relative;
    width: 350px;
    height: 450px;
    perspective: 1000px;
    background: transparent;
}

.starlightdojo-game-front, 
.starlightdojo-game-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.starlightdojo-game-front {
    background: white;
    padding: 20px;
    box-shadow: var(--shadow-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transform: rotateY(0deg);
}

.starlightdojo-game-back {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--text-light);
    padding: 30px;
    box-shadow: var(--shadow-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transform: rotateY(180deg);
}

.starlightdojo-game-card:hover .starlightdojo-game-front {
    transform: rotateY(180deg);
}

.starlightdojo-game-card:hover .starlightdojo-game-back {
    transform: rotateY(360deg);
}

.starlightdojo-game-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    position: relative;
}

.starlightdojo-game-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-medium);
}

.starlightdojo-game-card:hover .starlightdojo-game-image img {
    transform: scale(1.1);
}

.starlightdojo-game-title {
    font-size: 1.8rem;
    margin: 15px 0;
    color: var(--primary-color);
}

.starlightdojo-game-description {
    text-align: center;
    font-size: 1rem;
    color: var(--text-dark);
    opacity: 0.8;
}

.starlightdojo-game-features {
    list-style: none;
    margin: 20px 0;
}

.starlightdojo-game-features li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 1rem;
}

.starlightdojo-game-features li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--accent-color);
}

.starlightdojo-game-play {
    padding: 12px 30px;
    background: var(--accent-color);
    color: var(--text-light);
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: var(--shadow-medium);
    transition: var(--transition-fast);
}

.starlightdojo-game-play:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    animation: glow 2s infinite;
}

/* About Section Styles */
.starlightdojo-about {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
    position: relative;
}

.starlightdojo-about-content {
    flex: 1;
    min-width: 300px;
}

.starlightdojo-about-text {
    font-size: 1.1rem;
    margin-bottom: 20px;
    line-height: 1.8;
}

.starlightdojo-about-image {
    flex: 1;
    min-width: 300px;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: var(--shadow-hard);
}

.starlightdojo-about-parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.starlightdojo-about-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: var(--transition-slow);
}

.starlightdojo-about-layer-1 {
    background-image: url('about-img.png');
    z-index: 1;
}

.starlightdojo-about-layer-2 {
    background-image: url('about-img.png');
    z-index: 2;
    opacity: 0;
}

.starlightdojo-about-image:hover .starlightdojo-about-layer-1 {
    transform: translateX(-20px) scale(1.1);
}

.starlightdojo-about-image:hover .starlightdojo-about-layer-2 {
    opacity: 0.7;
    transform: translateX(20px) scale(1.1);
}

/* Newsletter Section Styles */
.starlightdojo-newsletter {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 80px 5%;
    color: var(--text-light);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.starlightdojo-newsletter::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: url('https://via.placeholder.com/1920x1080') center/cover repeat;
    opacity: 0.05;
    animation: rotate 60s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.starlightdojo-newsletter-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.starlightdojo-newsletter-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.starlightdojo-newsletter-text {
    font-size: 1.1rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.starlightdojo-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.starlightdojo-newsletter-input {
    flex: 1;
    min-width: 280px;
    padding: 15px 25px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    box-shadow: var(--shadow-medium);
    outline: none;
}

.starlightdojo-newsletter-button {
    padding: 15px 30px;
    background: var(--accent-color);
    color: var(--text-light);
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: var(--shadow-medium);
    transition: var(--transition-fast);
}

.starlightdojo-newsletter-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hard);
    background: #e67e22;
}

/* Contact Section Styles */
.starlightdojo-contact {
    background: var(--background-light);
    position: relative;
}

.starlightdojo-contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

.starlightdojo-contact-info {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.starlightdojo-contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.starlightdojo-contact-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: var(--text-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: var(--shadow-soft);
}

.starlightdojo-contact-form {
    flex: 2;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.starlightdojo-form-group {
    width: 100%;
}

.starlightdojo-form-input,
.starlightdojo-form-textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Quicksand', sans-serif;
    transition: var(--transition-fast);
    outline: none;
    background: white;
}

.starlightdojo-form-textarea {
    height: 150px;
    resize: none;
}

.starlightdojo-form-input:focus,
.starlightdojo-form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.2);
}

.starlightdojo-form-submit {
    padding: 15px 30px;
    background: var(--primary-color);
    color: var(--text-light);
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    align-self: flex-start;
    box-shadow: var(--shadow-medium);
    transition: var(--transition-fast);
}

.starlightdojo-form-submit:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hard);
    background: var(--secondary-color);
}

/* Footer Styles */
.starlightdojo-footer {
    background: #2c3e50;
    color: var(--text-light);
    padding-top: 60px;
}

.starlightdojo-footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 0 5% 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.starlightdojo-footer-logo img {
    height: 30px;
}

.starlightdojo-footer-links {
    display: flex;
    gap: 20px;
}

.starlightdojo-footer-link {
    opacity: 0.8;
    transition: var(--transition-fast);
}

.starlightdojo-footer-link:hover {
    opacity: 1;
    color: var(--accent-color);
}

.starlightdojo-footer-social {
    display: flex;
    gap: 15px;
}

.starlightdojo-footer-social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.starlightdojo-footer-social-link:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
}

.starlightdojo-footer-bottom {
    padding: 20px 5%;
    text-align: center;
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Parallax Effect */
.starlightdojo-parallax {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    perspective: 1px;
    transform-style: preserve-3d;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Media Queries */
@media (max-width: 991px) {
    .starlightdojo-hero-title {
        font-size: 3.5rem;
    }
    
    .starlightdojo-section-title {
        font-size: 2.5rem;
    }
    
    .starlightdojo-about {
        flex-direction: column;
    }
    
    .starlightdojo-about-image {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .starlightdojo-nav {
        flex-direction: column;
        padding: 15px;
    }
    
    .starlightdojo-nav-links {
        margin: 15px 0;
    }
    
    .starlightdojo-hero-title {
        font-size: 3rem;
    }
    
    .starlightdojo-hero-subtitle {
        font-size: 1.2rem;
    }
    
    .starlightdojo-game-card {
        width: 100%;
        max-width: 350px;
    }
    
    .starlightdojo-newsletter-form {
        flex-direction: column;
    }
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Smooth scrolling for inner elements */
.starlightdojo-parallax {
    scroll-behavior: smooth;
}


/* ================ Advanced 3D Showcase Section ================ */
.starlightdojo-showcase {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 20px;
}

@keyframes gradientBG {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

.starlightdojo-showcase-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      radial-gradient(2px 2px at 20px 30px, #eef, rgba(0,0,0,0)),
      radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
      radial-gradient(2px 2px at 50px 160px, #ddf, rgba(0,0,0,0)),
      radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
      radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
      radial-gradient(2px 2px at 160px 120px, #ddf, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: twinkle 5s ease-in-out infinite alternate;
  opacity: 0.5;
}

@keyframes twinkle {
  0% { opacity: 0.5; }
  100% { opacity: 0.8; }
}

.starlightdojo-showcase-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 30, 60, 0.2);
  z-index: 1;
}

.starlightdojo-showcase .starlightdojo-section-title {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  font-size: 3.5rem;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.starlightdojo-showcase-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 50px;
  max-width: 1200px;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* 3D Cube Styles */
.starlightdojo-scene {
  width: 300px;
  height: 300px;
  perspective: 1000px;
  position: relative;
}

.starlightdojo-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
  transition: all 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: rotateX(-15deg) rotateY(15deg) translateY(0); }
  50% { transform: rotateX(-15deg) rotateY(15deg) translateY(-20px); }
  100% { transform: rotateX(-15deg) rotateY(15deg) translateY(0); }
}

.starlightdojo-cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: all 0.5s ease;
}

.starlightdojo-cube-face:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.starlightdojo-cube-face::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.starlightdojo-cube-face:hover::before {
  opacity: 1;
}

.starlightdojo-cube-face-front { transform: translateZ(150px); }
.starlightdojo-cube-face-back { transform: rotateY(180deg) translateZ(150px); }
.starlightdojo-cube-face-right { transform: rotateY(90deg) translateZ(150px); }
.starlightdojo-cube-face-left { transform: rotateY(-90deg) translateZ(150px); }
.starlightdojo-cube-face-top { transform: rotateX(90deg) translateZ(150px); }
.starlightdojo-cube-face-bottom { transform: rotateX(-90deg) translateZ(150px); }

.starlightdojo-cube-content {
  padding: 30px;
  text-align: center;
  color: #fff;
  max-width: 90%;
}

.starlightdojo-cube-icon {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.4);
  position: relative;
  transition: all 0.5s ease;
}

.starlightdojo-cube-face:hover .starlightdojo-cube-icon {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.6);
}

.starlightdojo-cube-content h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.starlightdojo-cube-content p {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.6;
}

/* Showcase Info Styles */
.starlightdojo-showcase-info {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  color: #fff;
  padding: 30px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.starlightdojo-showcase-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  justify-content: center;
}

.starlightdojo-showcase-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 15px;
  border-radius: 50px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.starlightdojo-showcase-nav-btn:hover, 
.starlightdojo-showcase-nav-btn.active {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.starlightdojo-showcase-text {
  text-align: center;
}

.starlightdojo-showcase-text p {
  margin-bottom: 30px;
  font-size: 1.1rem;
  line-height: 1.8;
  opacity: 0.9;
}

.starlightdojo-showcase-btn {
  display: inline-block;
  padding: 15px 30px;
  background: linear-gradient(135deg, #8e44ad, #3498db);
  color: #fff;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.starlightdojo-showcase-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3498db, #8e44ad);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.starlightdojo-showcase-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.starlightdojo-showcase-btn:hover::before {
  opacity: 1;
}

/* Cube Rotation Classes */
.rotate-front { transform: rotateX(-15deg) rotateY(15deg); animation: none; }
.rotate-back { transform: rotateX(-15deg) rotateY(195deg); animation: none; }
.rotate-right { transform: rotateX(-15deg) rotateY(105deg); animation: none; }
.rotate-left { transform: rotateX(-15deg) rotateY(-75deg); animation: none; }
.rotate-top { transform: rotateX(75deg) rotateY(15deg); animation: none; }
.rotate-bottom { transform: rotateX(-105deg) rotateY(15deg); animation: none; }

/* ================ Interactive Testimonials Section ================ */
.starlightdojo-testimonials {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(to right, #f8f9fa, #e9ecef);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 20px;
}

.starlightdojo-testimonials-parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.starlightdojo-testimonials-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.05;
}

.layer-1 {
  background-image: url('https://via.placeholder.com/1920x1080');
  transform: translateZ(-1px) scale(2);
}

.layer-2 {
  background-image: url('https://via.placeholder.com/1920x1080');
  transform: translateZ(-2px) scale(3);
}

.layer-3 {
  background-image: url('https://via.placeholder.com/1920x1080');
  transform: translateZ(-3px) scale(4);
}

.starlightdojo-testimonials .starlightdojo-section-title {
  color: var(--primary-color);
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.starlightdojo-testimonials-container {
  max-width: 1200px;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Testimonial Cards */
.starlightdojo-testimonials-cards {
  position: relative;
  height: 400px;
  margin-bottom: 50px;
}

.starlightdojo-testimonial-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.starlightdojo-testimonial-card.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.starlightdojo-testimonial-card-inner {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  padding: 40px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(142, 68, 173, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.5s ease;
}

.starlightdojo-testimonial-card[data-game="astro"] .starlightdojo-testimonial-card-inner {
  background: linear-gradient(135deg, rgba(142, 68, 173, 0.05), rgba(52, 152, 219, 0.05));
}

.starlightdojo-testimonial-card[data-game="kungfu"] .starlightdojo-testimonial-card-inner {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.05), rgba(241, 196, 15, 0.05));
}

.starlightdojo-testimonial-card[data-game="kites"] .starlightdojo-testimonial-card-inner {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.05), rgba(46, 204, 113, 0.05));
}

.starlightdojo-testimonial-card-inner:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2);
}

.starlightdojo-testimonial-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.starlightdojo-testimonial-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  margin-right: 20px;
}

.starlightdojo-testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.starlightdojo-testimonial-avatar-aura {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  transition: all 1s ease;
}

.starlightdojo-testimonial-card[data-game="astro"] .starlightdojo-testimonial-avatar-aura {
  background: radial-gradient(circle, rgba(142, 68, 173, 0.4) 0%, rgba(142, 68, 173, 0) 70%);
  animation: pulse-purple 3s infinite;
}

.starlightdojo-testimonial-card[data-game="kungfu"] .starlightdojo-testimonial-avatar-aura {
  background: radial-gradient(circle, rgba(231, 76, 60, 0.4) 0%, rgba(231, 76, 60, 0) 70%);
  animation: pulse-red 3s infinite;
}

.starlightdojo-testimonial-card[data-game="kites"] .starlightdojo-testimonial-avatar-aura {
  background: radial-gradient(circle, rgba(52, 152, 219, 0.4) 0%, rgba(52, 152, 219, 0) 70%);
  animation: pulse-blue 3s infinite;
}

@keyframes pulse-purple {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 0.3; }
  100% { transform: scale(1); opacity: 0.7; }
}

@keyframes pulse-red {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 0.3; }
  100% { transform: scale(1); opacity: 0.7; }
}

@keyframes pulse-blue {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 0.3; }
  100% { transform: scale(1); opacity: 0.7; }
}

.starlightdojo-testimonial-author {
  flex: 1;
}

.starlightdojo-testimonial-author h3 {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.starlightdojo-testimonial-author span {
  font-size: 1rem;
  color: #777;
  display: block;
  margin-bottom: 10px;
}

.starlightdojo-testimonial-rating {
  color: #f39c12;
  font-size: 1.1rem;
  letter-spacing: 3px;
}

.starlightdojo-testimonial-content {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.starlightdojo-testimonial-content p {
  position: relative;
  z-index: 2;
}

.starlightdojo-testimonial-content::before {
  content: '"';
  position: absolute;
  top: -60px;
  left: -10px;
  font-size: 12rem;
  font-family: Georgia, serif;
  color: rgba(0, 0, 0, 0.05);
  z-index: 1;
}

.starlightdojo-testimonial-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #777;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 20px;
}

.starlightdojo-testimonial-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.starlightdojo-testimonial-card[data-game="astro"] .starlightdojo-testimonial-particles {
  background-image: 
      radial-gradient(2px 2px at 20px 30px, rgba(142, 68, 173, 0.3), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 40px 70px, rgba(142, 68, 173, 0.4), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 50px 160px, rgba(142, 68, 173, 0.3), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 90px 40px, rgba(142, 68, 173, 0.4), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 130px 80px, rgba(142, 68, 173, 0.3), rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: float-particles 15s linear infinite;
}

.starlightdojo-testimonial-card[data-game="kungfu"] .starlightdojo-testimonial-particles {
  background-image: 
      radial-gradient(2px 2px at 20px 30px, rgba(231, 76, 60, 0.3), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 40px 70px, rgba(231, 76, 60, 0.4), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 50px 160px, rgba(231, 76, 60, 0.3), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 90px 40px, rgba(231, 76, 60, 0.4), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 130px 80px, rgba(231, 76, 60, 0.3), rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: float-particles 15s linear infinite;
}

.starlightdojo-testimonial-card[data-game="kites"] .starlightdojo-testimonial-particles {
  background-image: 
      radial-gradient(2px 2px at 20px 30px, rgba(52, 152, 219, 0.3), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 40px 70px, rgba(52, 152, 219, 0.4), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 50px 160px, rgba(52, 152, 219, 0.3), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 90px 40px, rgba(52, 152, 219, 0.4), rgba(0,0,0,0)),
      radial-gradient(2px 2px at 130px 80px, rgba(52, 152, 219, 0.3), rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: float-particles 15s linear infinite;
}

@keyframes float-particles {
  0% { background-position: 0 0; }
  100% { background-position: 200px 200px; }
}

/* Testimonial Navigation */
.starlightdojo-testimonials-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.starlightdojo-testimonials-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100px;
  height: 100px;
  background: white;
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  position: relative;
}

.starlightdojo-testimonials-nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #ddd;
  transition: all 0.5s ease;
}

.starlightdojo-testimonials-nav-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: rgba(0, 0, 0, 0.05);
  transition: all 0.5s ease;
  z-index: 0;
}

.starlightdojo-testimonials-nav-btn:hover::after {
  height: 100%;
}

.starlightdojo-testimonials-nav-btn[data-testimonial="astro"]::before {
  background: #8e44ad;
}

.starlightdojo-testimonials-nav-btn[data-testimonial="kungfu"]::before {
  background: #e74c3c;
}

.starlightdojo-testimonials-nav-btn[data-testimonial="kites"]::before {
  background: #3498db;
}

.starlightdojo-testimonials-nav-btn i {
  font-size: 2rem;
  margin-bottom: 10px;
  z-index: 1;
  transition: all 0.5s ease;
}

.starlightdojo-testimonials-nav-btn span {
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 1;
  transition: all 0.5s ease;
}

.starlightdojo-testimonials-nav-btn:hover, 
.starlightdojo-testimonials-nav-btn.active {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.starlightdojo-testimonials-nav-btn:hover i, 
.starlightdojo-testimonials-nav-btn.active i {
  transform: scale(1.2);
}

.starlightdojo-testimonials-nav-btn[data-testimonial="astro"] i,
.starlightdojo-testimonials-nav-btn[data-testimonial="astro"] span {
  color: #8e44ad;
}

.starlightdojo-testimonials-nav-btn[data-testimonial="kungfu"] i,
.starlightdojo-testimonials-nav-btn[data-testimonial="kungfu"] span {
  color: #e74c3c;
}

.starlightdojo-testimonials-nav-btn[data-testimonial="kites"] i,
.starlightdojo-testimonials-nav-btn[data-testimonial="kites"] span {
  color: #3498db;
}

/* Glass Morphism Effect for Cards */
.starlightdojo-testimonial-card-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
}

/* Responsive Design */
@media (max-width: 991px) {
  .starlightdojo-showcase-container {
      flex-direction: column;
  }
  
  .starlightdojo-scene {
      margin-bottom: 30px;
  }
  
  .starlightdojo-showcase-info {
      max-width: 100%;
  }
  
  .starlightdojo-testimonials-cards {
      height: auto;
      margin-bottom: 30px;
  }
  
  .starlightdojo-testimonial-card {
      position: relative;
      display: none;
  }
  
  .starlightdojo-testimonial-card.active {
      display: block;
  }
}

@media (max-width: 768px) {
  .starlightdojo-cube {
      width: 250px;
      height: 250px;
  }
  
  .starlightdojo-testimonial-header {
      flex-direction: column;
      text-align: center;
  }
  
  .starlightdojo-testimonial-avatar {
      margin-right: 0;
      margin-bottom: 15px;
  }
  
  .starlightdojo-testimonials-nav {
      flex-wrap: wrap;
  }
  
  .starlightdojo-testimonials-nav-btn {
      width: 80px;
      height: 80px;
      font-size: 0.8rem;
  }
}

/* Additional Animations */
@keyframes glowing {
  0% { box-shadow: 0 0 10px rgba(142, 68, 173, 0.6); }
  50% { box-shadow: 0 0 20px rgba(142, 68, 173, 0.9), 0 0 30px rgba(142, 68, 173, 0.4); }
  100% { box-shadow: 0 0 10px rgba(142, 68, 173, 0.6); }
}

.starlightdojo-testimonial-card[data-game="astro"] .starlightdojo-testimonial-avatar img {
  animation: glowing 3s infinite;
}

@keyframes pulse-shadow {
  0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(231, 76, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.starlightdojo-testimonial-card[data-game="kungfu"] .starlightdojo-testimonial-avatar img {
  animation: pulse-shadow 2s infinite;
}

@keyframes float-subtle {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

.starlightdojo-testimonial-card[data-game="kites"] .starlightdojo-testimonial-avatar img {
  animation: float-subtle 3s ease-in-out infinite;
}

/* Hover state amplifies animations */
.starlightdojo-testimonial-card-inner:hover .starlightdojo-testimonial-avatar-aura {
  animation-duration: 1.5s;
}

/* Custom Scrollbar */
.starlightdojo-testimonial-content::-webkit-scrollbar {
  width: 3px;
}

.starlightdojo-testimonial-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.starlightdojo-testimonial-content::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 173, 0.5);
  border-radius: 10px;
}

.starlightdojo-testimonial-content::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 173, 0.8);
}



/* ================ Advanced Floating Islands Showcase Section ================ */

.starlightdojo-showcase {
  position: relative;
  min-height: 120vh;
  background: linear-gradient(to bottom, #0a0a2a, #1e0440, #3d0769);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 100px 20px 150px;
  perspective: 1000px;
}

/* Nebula Background */
.starlightdojo-nebula-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://via.placeholder.com/1920x1080');
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  filter: blur(8px);
  animation: nebula-move 60s infinite alternate linear;
}

@keyframes nebula-move {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.2) rotate(5deg); }
}

/* Stars Container */
.starlightdojo-stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Shooting Stars */
.starlightdojo-shooting-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}

.starlightdojo-shooting-star {
  position: absolute;
  left: -200px;
  top: 0;
  height: 2px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
  animation: shooting-star-anim 3s ease-in infinite;
}

@keyframes shooting-star-anim {
  0% {
      transform: translateX(0) translateY(0) rotate(0deg);
      opacity: 1;
      width: 0;
  }
  30% {
      width: 100px;
  }
  100% {
      transform: translateX(calc(100vw + 300px)) translateY(100px) rotate(0deg);
      opacity: 0;
      width: 0;
  }
}

.starlightdojo-showcase .starlightdojo-section-title {
  color: #fff;
  font-size: 3.5rem;
  margin-bottom: 80px;
  text-align: center;
  position: relative;
  z-index: 5;
  text-shadow: 0 0 15px rgba(100, 100, 255, 0.8), 0 0 30px rgba(50, 50, 255, 0.4);
  letter-spacing: 2px;
}

.starlightdojo-showcase-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1400px;
  width: 100%;
  z-index: 5;
  gap: 80px;
}

/* Floating Islands Container */
.starlightdojo-islands-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  width: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Individual Island */
.starlightdojo-island {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  transform: translateZ(0) rotateX(15deg) rotateY(0);
  animation: island-float 6s ease-in-out infinite;
  transform-origin: center bottom;
}

.starlightdojo-island:nth-child(2) {
  animation-delay: 1s;
}

.starlightdojo-island:nth-child(3) {
  animation-delay: 2s;
}

@keyframes island-float {
  0% { transform: translateZ(0) rotateX(15deg) rotateY(0) translateY(0); }
  50% { transform: translateZ(0) rotateX(15deg) rotateY(0) translateY(-20px); }
  100% { transform: translateZ(0) rotateX(15deg) rotateY(0) translateY(0); }
}

.starlightdojo-island:hover {
  transform: translateZ(50px) rotateX(5deg) rotateY(0) translateY(-30px) scale(1.05);
  z-index: 10;
  animation-play-state: paused;
}

/* Island Glow Effect */
.starlightdojo-island-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.5;
  z-index: -1;
  transform: translateZ(-20px) scale(1.2);
  transition: all 0.5s ease;
}

.starlightdojo-island[data-world="astro"] .starlightdojo-island-glow {
  background: radial-gradient(circle, rgba(120, 70, 200, 0.8) 0%, rgba(120, 70, 200, 0) 70%);
  animation: pulse-glow 3s infinite alternate;
}

.starlightdojo-island[data-world="kungfu"] .starlightdojo-island-glow {
  background: radial-gradient(circle, rgba(230, 60, 60, 0.8) 0%, rgba(230, 60, 60, 0) 70%);
  animation: pulse-glow 4s infinite alternate;
}

.starlightdojo-island[data-world="kites"] .starlightdojo-island-glow {
  background: radial-gradient(circle, rgba(60, 170, 220, 0.8) 0%, rgba(60, 170, 220, 0) 70%);
  animation: pulse-glow 5s infinite alternate;
}

@keyframes pulse-glow {
  0% { opacity: 0.3; transform: translateZ(-20px) scale(1.2); }
  100% { opacity: 0.7; transform: translateZ(-20px) scale(1.4); }
}

.starlightdojo-island:hover .starlightdojo-island-glow {
  opacity: 0.8;
  filter: blur(40px);
  transform: translateZ(-20px) scale(1.6);
}

/* Island Base (3D Effect) */
.starlightdojo-island-base {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.starlightdojo-island-top {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateZ(20px);
  overflow: hidden;
}

.starlightdojo-island-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
}

.starlightdojo-island-side {
  position: absolute;
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: translateY(50%) rotateX(-90deg);
  transform-origin: top center;
  filter: blur(2px);
}

/* Island Content */
.starlightdojo-island-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #fff;
  text-align: center;
  transform: translateZ(40px);
  transition: all 0.5s ease;
}

.starlightdojo-island:hover .starlightdojo-island-content {
  opacity: 0;
  transform: translateZ(40px) translateY(-20px);
}

.starlightdojo-island-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease;
}

.starlightdojo-island[data-world="astro"] .starlightdojo-island-icon {
  color: #a98aff;
  text-shadow: 0 0 10px #a98aff;
}

.starlightdojo-island[data-world="kungfu"] .starlightdojo-island-icon {
  color: #ff7a7a;
  text-shadow: 0 0 10px #ff7a7a;
}

.starlightdojo-island[data-world="kites"] .starlightdojo-island-icon {
  color: #7acdff;
  text-shadow: 0 0 10px #7acdff;
}

.starlightdojo-island:hover .starlightdojo-island-icon {
  transform: scale(1.1) rotate(10deg);
}

.starlightdojo-island-details h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Hover Content (Appears on Hover) */
.starlightdojo-island-hover-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translateZ(40px) translateY(20px);
  transition: all 0.5s ease;
}

.starlightdojo-island:hover .starlightdojo-island-hover-content {
  opacity: 1;
  transform: translateZ(40px) translateY(0);
}

.starlightdojo-island-hover-content h3 {
  font-size: 2rem;
  margin-bottom: 15px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.starlightdojo-island-hover-content p {
  font-size: 1rem;
  margin-bottom: 25px;
  opacity: 0.9;
  line-height: 1.6;
}

.starlightdojo-island-btn {
  padding: 12px 25px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.starlightdojo-island-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  transition: all 0.6s ease;
}

.starlightdojo-island-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
}

.starlightdojo-island-btn:hover::before {
  transform: translateX(100%);
}

.starlightdojo-island[data-world="astro"] .starlightdojo-island-btn:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(169, 138, 255, 0.7);
}

.starlightdojo-island[data-world="kungfu"] .starlightdojo-island-btn:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 122, 122, 0.7);
}

.starlightdojo-island[data-world="kites"] .starlightdojo-island-btn:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(122, 205, 255, 0.7);
}

/* Planet System (For Astro Island) */
.starlightdojo-planet-system {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  transform-style: preserve-3d;
}

.starlightdojo-sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #fff, #a98aff);
  border-radius: 50%;
  box-shadow: 0 0 20px #a98aff;
  transform: translate(-50%, -50%);
}

.starlightdojo-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(70deg);
  animation: rotate-orbit 10s linear infinite;
}

.starlightdojo-orbit.orbit-2 {
  width: 120px;
  height: 120px;
  animation-duration: 15s;
}

.starlightdojo-orbit.orbit-3 {
  width: 160px;
  height: 160px;
  animation-duration: 20s;
}

@keyframes rotate-orbit {
  0% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); }
}

.starlightdojo-planet {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #5b42a5;
  border-radius: 50%;
  transform: translateX(-50%) scale(1);
}

.planet-1 { background: #c5a8ff; box-shadow: 0 0 10px #c5a8ff; }
.planet-2 { background: #9a6fff; box-shadow: 0 0 10px #9a6fff; }
.planet-3 { background: #7a4eff; box-shadow: 0 0 10px #7a4eff; }

/* Energy Spheres (For Kung Fu Island) */
.starlightdojo-energy-spheres {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.starlightdojo-energy-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #ff7a7a;
  transform: translate(-50%, -50%);
  animation: energy-pulse 3s infinite alternate;
}

.starlightdojo-energy-circle.circle-1 {
  width: 60px;
  height: 60px;
  animation-delay: 0s;
}

.starlightdojo-energy-circle.circle-2 {
  width: 90px;
  height: 90px;
  animation-delay: 0.5s;
}

.starlightdojo-energy-circle.circle-3 {
  width: 120px;
  height: 120px;
  animation-delay: 1s;
}

@keyframes energy-pulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

.starlightdojo-energy-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #fff, #ff7a7a);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px #ff7a7a;
  animation: inner-pulse 1.5s infinite;
}

@keyframes inner-pulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
}

/* Kites Container (For Kites Island) */
.starlightdojo-kites-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  perspective: 300px;
}

.starlightdojo-kite {
  position: absolute;
  width: 24px;
  height: 24px;
  transform-style: preserve-3d;
  animation: kite-float 10s ease-in-out infinite alternate;
}

.starlightdojo-kite.kite-1 {
  top: 30%;
  left: 30%;
  background: linear-gradient(135deg, #7acdff, #25a1f0);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 50% 50%);
  animation-delay: 0s;
}

.starlightdojo-kite.kite-2 {
  top: 60%;
  left: 50%;
  background: linear-gradient(135deg, #4aadff, #1591e0);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 50% 50%);
  animation-delay: 1s;
}

.starlightdojo-kite.kite-3 {
  top: 40%;
  left: 70%;
  background: linear-gradient(135deg, #3a9dff, #058ad0);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 50% 50%);
  animation-delay: 2s;
}

@keyframes kite-float {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  20% { transform: translate(5px, -5px) rotate(10deg) scale(1.1); }
  40% { transform: translate(-5px, 5px) rotate(-5deg) scale(0.9); }
  60% { transform: translate(-10px, -10px) rotate(-10deg) scale(1); }
  80% { transform: translate(10px, 5px) rotate(5deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

.starlightdojo-wind-current {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(122, 205, 255, 0.1);
  border: 1px dashed rgba(122, 205, 255, 0.3);
  animation: wind-rotate 15s linear infinite;
}

@keyframes wind-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Showcase Info Styles */
.starlightdojo-showcase-info {
  max-width: 800px;
  width: 100%;
  padding: 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  z-index: 5;
}

.starlightdojo-showcase-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, rgba(169, 138, 255, 0.8), rgba(255, 122, 122, 0.8), rgba(122, 205, 255, 0.8));
}

.starlightdojo-showcase-info-title {
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.starlightdojo-showcase-info-text {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 30px;
  opacity: 0.9;
}

/* Navigation Buttons */
.starlightdojo-showcase-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.starlightdojo-world-btn {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.starlightdojo-world-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  transition: all 0.6s ease;
}

.starlightdojo-world-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.starlightdojo-world-btn:hover::before {
  transform: translateX(100%);
}

.starlightdojo-world-btn.active {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.4);
}

.starlightdojo-world-btn[data-world="astro"] {
  border-color: rgba(169, 138, 255, 0.4);
}

.starlightdojo-world-btn[data-world="kungfu"] {
  border-color: rgba(255, 122, 122, 0.4);
}

.starlightdojo-world-btn[data-world="kites"] {
  border-color: rgba(122, 205, 255, 0.4);
}

.starlightdojo-world-btn[data-world="astro"]:hover,
.starlightdojo-world-btn[data-world="astro"].active {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(169, 138, 255, 0.6);
}

.starlightdojo-world-btn[data-world="kungfu"]:hover,
.starlightdojo-world-btn[data-world="kungfu"].active {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 122, 122, 0.6);
}

.starlightdojo-world-btn[data-world="kites"]:hover,
.starlightdojo-world-btn[data-world="kites"].active {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(122, 205, 255, 0.6);
}

.starlightdojo-world-btn-icon {
  margin-right: 10px;
  font-size: 1.2rem;
}

.starlightdojo-world-btn[data-world="astro"] .starlightdojo-world-btn-icon {
  color: #a98aff;
}

.starlightdojo-world-btn[data-world="kungfu"] .starlightdojo-world-btn-icon {
  color: #ff7a7a;
}

.starlightdojo-world-btn[data-world="kites"] .starlightdojo-world-btn-icon {
  color: #7acdff;
}

/* Showcase Stats */
.starlightdojo-showcase-stats {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.starlightdojo-stat {
  flex: 1;
  text-align: center;
}

.starlightdojo-stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 5px;
  background: linear-gradient(135deg, #a98aff, #ff7a7a, #7acdff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.starlightdojo-stat-label {
  font-size: 0.9rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Light Particles */
.starlightdojo-light-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.starlightdojo-light-particle {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  filter: blur(2px);
  animation: light-particle-anim 10s ease-in-out infinite;
}

@keyframes light-particle-anim {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.2; }
  100% { transform: translateY(-300px) translateX(100px); opacity: 0; }
}

/* Portal Effect */
.starlightdojo-portal-container {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

.starlightdojo-portal-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transform-style: preserve-3d;
  animation: portal-ring-rotate 20s linear infinite;
}

.starlightdojo-portal-ring.ring-1 {
  width: 200px;
  height: 200px;
  border-color: rgba(169, 138, 255, 0.5);
  animation-duration: 30s;
}

.starlightdojo-portal-ring.ring-2 {
  width: 150px;
  height: 150px;
  border-color: rgba(255, 122, 122, 0.5);
  animation-duration: 20s;
  animation-direction: reverse;
}

.starlightdojo-portal-ring.ring-3 {
  width: 100px;
  height: 100px;
  border-color: rgba(122, 205, 255, 0.5);
  animation-duration: 15s;
}

@keyframes portal-ring-rotate {
  0% { transform: rotateX(70deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(70deg) rotateY(0deg) rotateZ(360deg); }
}

.starlightdojo-portal-core {
  position: absolute;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #fff, #a98aff);
  border-radius: 50%;
  filter: blur(5px);
  animation: portal-pulse 3s ease-in-out infinite;
}

@keyframes portal-pulse {
  0% { transform: scale(0.8); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.7; }
}

.starlightdojo-portal-btn {
  position: relative;
  z-index: 2;
  padding: 12px 30px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.2);
  animation: portal-btn-pulse 2s infinite;
}

@keyframes portal-btn-pulse {
  0% { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.2); }
  50% { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.4); }
  100% { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.2); }
}

.starlightdojo-portal-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 255, 0.5);
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .starlightdojo-islands-container {
      flex-wrap: wrap;
  }
  
  .starlightdojo-island {
      margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .starlightdojo-showcase .starlightdojo-section-title {
      font-size: 2.5rem;
  }
  
  .starlightdojo-showcase-container {
      gap: 50px;
  }
  
  .starlightdojo-island {
      width: 250px;
      height: 250px;
  }
  
  .starlightdojo-showcase-info {
      padding: 30px 20px;
  }
  
  .starlightdojo-showcase-info-title {
      font-size: 2rem;
  }
  
  .starlightdojo-showcase-info-text {
      font-size: 1rem;
  }
  
  .starlightdojo-showcase-stats {
      flex-direction: column;
      gap: 15px;
  }
  
  .starlightdojo-portal-container {
      bottom: 30px;
      width: 150px;
      height: 150px;
  }
  
  .starlightdojo-portal-ring.ring-1 {
      width: 150px;
      height: 150px;
  }
  
  .starlightdojo-portal-ring.ring-2 {
      width: 100px;
      height: 100px;
  }
  
  .starlightdojo-portal-ring.ring-3 {
      width: 70px;
      height: 70px;
  }
  
  .starlightdojo-portal-core {
      width: 40px;
      height: 40px;
  }
}

@media (max-width: 480px) {
  .starlightdojo-showcase .starlightdojo-section-title {
      font-size: 2rem;
  }
  
  .starlightdojo-island {
      width: 220px;
      height: 220px;
  }
  
  .starlightdojo-showcase-nav {
      flex-direction: column;
      gap: 10px;
  }
  
  .starlightdojo-world-btn {
      width: 100%;
      justify-content: center;
  }
}

/* Extra Animations for Enhanced Visual Appeal */
@keyframes ripple {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.starlightdojo-island::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transform: scale(0.8);
  opacity: 0;
  animation: ripple 3s infinite;
  z-index: -1;
}

.starlightdojo-island[data-world="astro"]::after {
  border-color: rgba(169, 138, 255, 0.3);
}

.starlightdojo-island[data-world="kungfu"]::after {
  border-color: rgba(255, 122, 122, 0.3);
}

.starlightdojo-island[data-world="kites"]::after {
  border-color: rgba(122, 205, 255, 0.3);
}


/* Stilizare modernă pentru footer cu poziționare nouă a butoanelor */
.starlightdojo-footer {
  background: linear-gradient(135deg, #111122, #22113b);
  position: relative;
  overflow: hidden;
  padding: 0;
  font-family: 'Quicksand', sans-serif;
}

/* Efect de particule în background */
.starlightdojo-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.3), rgba(0,0,0,0)),
      radial-gradient(1px 1px at 20px 50px, rgba(255,255,255,0.3), rgba(0,0,0,0)),
      radial-gradient(1px 1px at 30px 30px, rgba(255,255,255,0.3), rgba(0,0,0,0)),
      radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.3), rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 100px 100px;
  opacity: 0.1;
  animation: stars-move 100s linear infinite;
}

@keyframes stars-move {
  0% { background-position: 0 0; }
  100% { background-position: 100px 100px; }
}

/* Conținut principal footer */
.starlightdojo-footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  position: relative;
}

/* Logo */
.starlightdojo-footer-logo {
  filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.5));
  transform: scale(1.5);
  transition: all 0.5s ease;
}

.starlightdojo-footer-logo:hover {
  transform: scale(1.6);
  filter: drop-shadow(0 0 15px rgba(138, 43, 226, 0.7));
}

/* Disclaimer */
.starlightdojo-footer-disclaimer {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  padding: 20px;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.starlightdojo-footer-disclaimer p {
  max-width: 900px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
  padding: 0 20px;
}

/* Linkuri legale - Stilizare complet diferită ca butoane */
.starlightdojo-footer-legal {
  padding: 40px 20px;
  background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0.1), rgba(0,0,0,0.3));
}

.starlightdojo-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  max-width: 1000px;
  margin: 0 auto;
}

.starlightdojo-legal-link {
  color: white;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.starlightdojo-legal-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0), rgba(255,255,255,0.1));
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.starlightdojo-legal-link:hover {
  background: rgba(138, 43, 226, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-color: rgba(138, 43, 226, 0.5);
}

.starlightdojo-legal-link:hover::before {
  transform: translateX(100%);
}

/* Footer bottom */
.starlightdojo-footer-bottom {
  background: rgba(0, 0, 0, 0.4);
  padding: 15px 20px;
  text-align: center;
}

.starlightdojo-footer-bottom p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .starlightdojo-legal-links {
      flex-direction: column;
      align-items: center;
      gap: 10px;
  }
  
  .starlightdojo-legal-link {
      width: 80%;
      text-align: center;
  }
}

/* CSS pentru div-ul animat din navbar */
.starlightdojo-nav-animated-orb {
  position: relative;
  width: 50px;
  height: 50px;
  margin-left: 20px;
  overflow: visible;
}

/* Stilizare pentru sfera interioară animată */
.starlightdojo-orb-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8e44ad, #3498db);
  box-shadow: 0 0 15px rgba(142, 68, 173, 0.5),
              0 0 30px rgba(142, 68, 173, 0.3);
  animation: pulseAndRotate 3s infinite ease-in-out;
}

/* Efectul de particule în jurul sferei */
.starlightdojo-orb-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Generăm 8 particule folosind pseudo-elemente */
.starlightdojo-orb-particles::before,
.starlightdojo-orb-particles::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3498db;
  transform-origin: center;
  animation: orbitalParticles 6s infinite linear;
}

.starlightdojo-orb-particles::after {
  width: 6px;
  height: 6px;
  background-color: #8e44ad;
  animation-duration: 4s;
  animation-direction: reverse;
}

/* Generăm particule suplimentare folosind data-attribute */
.starlightdojo-orb-particles::before {
  box-shadow: 
      15px 10px 0 -2px #8e44ad,
      -15px -10px 0 -2px #3498db,
      -15px 10px 0 -3px #9b59b6,
      15px -10px 0 -3px #2980b9,
      0px 18px 0 -2px #8e44ad,
      0px -18px 0 -2px #3498db;
}

/* Animații */
@keyframes pulseAndRotate {
  0% {
      transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
      box-shadow: 0 0 15px rgba(142, 68, 173, 0.5),
                  0 0 30px rgba(142, 68, 173, 0.3);
  }
  50% {
      transform: translate(-50%, -50%) scale(1.1) rotate(180deg);
      box-shadow: 0 0 20px rgba(142, 68, 173, 0.7),
                  0 0 40px rgba(142, 68, 173, 0.5);
  }
  100% {
      transform: translate(-50%, -50%) scale(0.8) rotate(360deg);
      box-shadow: 0 0 15px rgba(142, 68, 173, 0.5),
                  0 0 30px rgba(142, 68, 173, 0.3);
  }
}

@keyframes orbitalParticles {
  0% {
      transform: translate(-50%, -50%) rotate(0deg) translateX(20px) scale(1);
      opacity: 1;
  }
  50% {
      transform: translate(-50%, -50%) rotate(180deg) translateX(20px) scale(0.7);
      opacity: 0.7;
  }
  100% {
      transform: translate(-50%, -50%) rotate(360deg) translateX(20px) scale(1);
      opacity: 1;
  }
}

/* Adăugăm un hover effect */
.starlightdojo-nav-animated-orb:hover .starlightdojo-orb-inner {
  animation-play-state: paused;
  background: linear-gradient(135deg, #9b59b6, #2980b9);
  box-shadow: 0 0 25px rgba(142, 68, 173, 0.8),
              0 0 50px rgba(142, 68, 173, 0.6);
  transition: all 0.3s ease;
}

.starlightdojo-nav-animated-orb:hover .starlightdojo-orb-particles::before,
.starlightdojo-nav-animated-orb:hover .starlightdojo-orb-particles::after {
  animation-play-state: paused;
}

/* Adăugăm un efect de undă la click */
.starlightdojo-nav-animated-orb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(142, 68, 173, 0.5);
  opacity: 0;
  animation: rippleEffect 3s infinite ease-out;
}

@keyframes rippleEffect {
  0% {
      width: 30px;
      height: 30px;
      opacity: 0.8;
  }
  100% {
      width: 70px;
      height: 70px;
      opacity: 0;
  }
}

/* Media query pentru dispozitive mobile */
@media (max-width: 768px) {
  .starlightdojo-nav-animated-orb {
      width: 40px;
      height: 40px;
  }
  
  .starlightdojo-orb-inner {
      width: 24px;
      height: 24px;
  }
}




/* ================ About Page Section with 3D Effects ================ */
.starlightdojo-aboutpage {
  position: relative;
  min-height: 100vh;
  padding: 100px 20px;
  background: linear-gradient(135deg, #0c0c20, #1e0b38);
  overflow: hidden;
  color: #fff;
  perspective: 1000px;
}

/* Background Effects */
.starlightdojo-aboutpage-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.starlightdojo-aboutpage-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
      radial-gradient(circle at 20% 30%, rgba(100, 100, 255, 0.1) 0%, rgba(100, 100, 255, 0) 15%),
      radial-gradient(circle at 80% 20%, rgba(255, 100, 255, 0.1) 0%, rgba(255, 100, 255, 0) 15%),
      radial-gradient(circle at 40% 70%, rgba(100, 255, 255, 0.1) 0%, rgba(100, 255, 255, 0) 15%);
}

.starlightdojo-aboutpage-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(500px) rotateX(60deg) scale(2.5);
  transform-origin: center bottom;
  opacity: 0.3;
}

.starlightdojo-aboutpage-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.starlightdojo-aboutpage .starlightdojo-section-title {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 60px;
  background: linear-gradient(to right, #a98aff, #ff7a7a, #7acdff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
}

.starlightdojo-aboutpage .starlightdojo-section-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, #a98aff, #ff7a7a, #7acdff);
  border-radius: 3px;
}

/* 3D Flip Cards */
.starlightdojo-aboutpage-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 80px;
}

.starlightdojo-aboutpage-card {
  width: 300px;
  height: 250px;
  perspective: 1000px;
  cursor: pointer;
}

.starlightdojo-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
}

.starlightdojo-aboutpage-card:hover .starlightdojo-card-inner,
.starlightdojo-aboutpage-card:focus .starlightdojo-card-inner {
  transform: rotateY(180deg);
}

.starlightdojo-card-front,
.starlightdojo-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.starlightdojo-card-front::before,
.starlightdojo-card-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #a98aff, #ff7a7a, #7acdff);
}

.starlightdojo-card-back {
  transform: rotateY(180deg);
  text-align: center;
}

.starlightdojo-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 2rem;
  color: #a98aff;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.starlightdojo-card-icon::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(45deg, #a98aff, #ff7a7a, #7acdff, #a98aff);
  background-size: 400% 400%;
  animation: gradient-animation 5s ease infinite;
  z-index: -1;
  opacity: 0.5;
  filter: blur(8px);
  border-radius: 50%;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.starlightdojo-card-front h3,
.starlightdojo-card-back h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #fff;
}

.starlightdojo-card-back p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.starlightdojo-card-hint {
  position: absolute;
  bottom: 15px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.starlightdojo-aboutpage-card:hover .starlightdojo-card-hint {
  opacity: 1;
  transform: translateY(0);
}

/* 3D Timeline */
.starlightdojo-aboutpage-timeline {
  margin-bottom: 80px;
  position: relative;
}

.starlightdojo-timeline-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 60px;
  color: #fff;
}

.starlightdojo-timeline-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 0;
}

.starlightdojo-timeline-track {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #a98aff, #ff7a7a, #7acdff);
  transform: translateY(-50%);
  border-radius: 2px;
  z-index: 1;
}

.starlightdojo-timeline-item {
  position: relative;
  margin-bottom: 100px;
  z-index: 2;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.starlightdojo-timeline-item.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.starlightdojo-timeline-item:nth-child(odd) {
  padding-right: 50%;
  text-align: right;
}

.starlightdojo-timeline-item:nth-child(even) {
  padding-left: 50%;
  text-align: left;
}

.starlightdojo-timeline-item::before {
  content: attr(data-year);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 3;
}

.starlightdojo-timeline-item:nth-child(odd)::before {
  right: calc(50% - 70px);
}

.starlightdojo-timeline-item:nth-child(even)::before {
  left: calc(50% - 70px);
}

.starlightdojo-timeline-item::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 20px rgba(169, 138, 255, 0.8);
  z-index: 3;
}

.starlightdojo-timeline-item:nth-child(odd)::after {
  right: calc(50% - 10px);
}

.starlightdojo-timeline-item:nth-child(even)::after {
  left: calc(50% - 10px);
}

.starlightdojo-timeline-content {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: all 0.3s ease;
}

.starlightdojo-timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.starlightdojo-timeline-content h4 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #a98aff;
}

.starlightdojo-timeline-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* 3D Stats Counter */
.starlightdojo-aboutpage-stats {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 80px;
}

.starlightdojo-stat-item {
  text-align: center;
  flex: 1;
  min-width: 200px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transform: perspective(500px) rotateX(10deg);
  transition: all 0.5s ease;
}

.starlightdojo-stat-item:hover {
  transform: perspective(500px) rotateX(0deg) translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.starlightdojo-stat-value {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(to right, #a98aff, #ff7a7a, #7acdff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.5s ease;
}

.starlightdojo-stat-item:hover .starlightdojo-stat-value {
  transform: scale(1.1);
}

.starlightdojo-stat-label {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Team Values */
.starlightdojo-aboutpage-values {
  margin-bottom: 60px;
}

.starlightdojo-values-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 60px;
  color: #fff;
}

.starlightdojo-values-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.starlightdojo-value-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}

.starlightdojo-value-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
  transform: rotate(45deg);
  opacity: 0;
  transition: all 0.8s ease;
}

.starlightdojo-value-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.starlightdojo-value-item:hover::before {
  opacity: 1;
  transform: rotate(45deg) translate(50%, 50%);
}

.starlightdojo-value-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
  color: #ff7a7a;
  transition: all 0.5s ease;
}

.starlightdojo-value-item:hover .starlightdojo-value-icon {
  transform: rotateY(360deg);
}

.starlightdojo-value-item h4 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #7acdff;
}

.starlightdojo-value-item p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* Responsive Styles */
@media (max-width: 991px) {
  .starlightdojo-aboutpage .starlightdojo-section-title {
      font-size: 2.5rem;
  }
  
  .starlightdojo-timeline-item:nth-child(odd),
  .starlightdojo-timeline-item:nth-child(even) {
      padding: 0 0 0 100px;
      text-align: left;
  }
  
  .starlightdojo-timeline-item:nth-child(odd)::before,
  .starlightdojo-timeline-item:nth-child(even)::before {
      left: 0;
      right: auto;
  }
  
  .starlightdojo-timeline-item:nth-child(odd)::after,
  .starlightdojo-timeline-item:nth-child(even)::after {
      left: 80px;
      right: auto;
  }
  
  .starlightdojo-timeline-track {
      left: 80px;
      width: 4px;
      height: 100%;
      top: 0;
      transform: none;
  }
}

@media (max-width: 768px) {
  .starlightdojo-aboutpage {
      padding: 80px 20px;
  }
  
  .starlightdojo-timeline-item:nth-child(odd),
  .starlightdojo-timeline-item:nth-child(even) {
      padding: 0 0 0 70px;
  }
  
  .starlightdojo-timeline-item:nth-child(odd)::before,
  .starlightdojo-timeline-item:nth-child(even)::before {
      padding: 8px 15px;
      font-size: 0.9rem;
  }
  
  .starlightdojo-timeline-item:nth-child(odd)::after,
  .starlightdojo-timeline-item:nth-child(even)::after {
      left: 60px;
      width: 15px;
      height: 15px;
  }
  
  .starlightdojo-timeline-track {
      left: 60px;
  }
  
  .starlightdojo-stat-value {
      font-size: 2.5rem;
  }
}

/* Animation classes */
.fade-in {
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.scale-in {
  animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ================ Contact Page Styles ================ */
.starlightdojo-contactpage {
  position: relative;
  min-height: 100vh;
  padding: 100px 20px;
  background: linear-gradient(135deg, #0c0c20, #1e0b38);
  overflow: hidden;
  color: #fff;
  perspective: 1000px;
}

/* Background Effects */
.starlightdojo-contactpage-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.starlightdojo-contactpage-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
      radial-gradient(circle at 20% 30%, rgba(100, 100, 255, 0.1) 0%, rgba(100, 100, 255, 0) 15%),
      radial-gradient(circle at 80% 20%, rgba(255, 100, 255, 0.1) 0%, rgba(255, 100, 255, 0) 15%),
      radial-gradient(circle at 40% 70%, rgba(100, 255, 255, 0.1) 0%, rgba(100, 255, 255, 0) 15%);
}

.starlightdojo-contactpage-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(500px) rotateX(60deg) scale(2.5);
  transform-origin: center bottom;
  opacity: 0.3;
}

.starlightdojo-contactpage-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.starlightdojo-contactpage .starlightdojo-section-title {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 60px;
  background: linear-gradient(to right, #a98aff, #ff7a7a, #7acdff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
}

.starlightdojo-contactpage .starlightdojo-section-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, #a98aff, #ff7a7a, #7acdff);
  border-radius: 3px;
}

/* Contact Content Layout */
.starlightdojo-contact-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

/* Contact Form Styles */
.starlightdojo-contact-form-container {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
}

.starlightdojo-contact-form-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(5deg);
  transition: all 0.5s ease;
}

.starlightdojo-contact-form-card:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.starlightdojo-contact-form-card h3 {
  font-size: 2rem;
  margin-bottom: 30px;
  text-align: center;
  color: #fff;
}

.starlightdojo-contact-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.starlightdojo-form-group {
  position: relative;
  overflow: hidden;
}

.starlightdojo-form-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: #a98aff;
  font-size: 1.2rem;
  z-index: 1;
}

.starlightdojo-form-textarea + .starlightdojo-form-icon {
  top: 30px;
}

.starlightdojo-form-input,
.starlightdojo-form-select,
.starlightdojo-form-textarea {
  width: 100%;
  padding: 15px 20px 15px 50px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  font-family: 'Quicksand', sans-serif;
  transition: all 0.3s ease;
}

.starlightdojo-form-textarea {
  min-height: 150px;
  resize: vertical;
}

.starlightdojo-form-input:focus,
.starlightdojo-form-select:focus,
.starlightdojo-form-textarea:focus {
  outline: none;
  border-color: #a98aff;
  box-shadow: 0 0 15px rgba(169, 138, 255, 0.3);
}

.starlightdojo-form-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #a98aff, #ff7a7a, #7acdff);
  transition: all 0.3s ease;
}

.starlightdojo-form-input:focus ~ .starlightdojo-form-highlight,
.starlightdojo-form-select:focus ~ .starlightdojo-form-highlight,
.starlightdojo-form-textarea:focus ~ .starlightdojo-form-highlight {
  width: 100%;
}

.starlightdojo-form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  background: linear-gradient(135deg, #8e44ad, #3498db);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
  z-index: 1;
  align-self: center;
}

.starlightdojo-form-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3498db, #8e44ad);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.starlightdojo-form-submit:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.starlightdojo-form-submit:hover::before {
  opacity: 1;
}

.starlightdojo-form-submit i {
  transition: all 0.3s ease;
}

.starlightdojo-form-submit:hover i {
  transform: translateX(5px);
}

/* Contact Info Styles */
.starlightdojo-contact-info-container {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.starlightdojo-contact-info-card,
.starlightdojo-faq-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(5deg);
  transition: all 0.5s ease;
}

.starlightdojo-contact-info-card:hover,
.starlightdojo-faq-card:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.starlightdojo-contact-info-card h3,
.starlightdojo-faq-card h3 {
  font-size: 2rem;
  margin-bottom: 30px;
  text-align: center;
  color: #fff;
}

.starlightdojo-contact-info-list {
  list-style: none;
  margin-bottom: 30px;
}

.starlightdojo-contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.starlightdojo-contact-info-item:hover {
  transform: translateX(10px);
}

.starlightdojo-contact-icon {
  width: 50px;
  height: 50px;
  background: rgba(169, 138, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #a98aff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.starlightdojo-contact-info-item:hover .starlightdojo-contact-icon {
  background: rgba(169, 138, 255, 0.2);
  transform: rotateY(180deg);
  color: #fff;
  box-shadow: 0 5px 15px rgba(169, 138, 255, 0.3);
}

.starlightdojo-contact-text h4 {
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: #a98aff;
}

.starlightdojo-contact-text p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Social Links */
.starlightdojo-contact-social h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  text-align: center;
  color: #a98aff;
}

.starlightdojo-social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.starlightdojo-social-link {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  transition: all 0.3s ease;
}

.starlightdojo-social-link:hover {
  transform: translateY(-5px) rotate(10deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.starlightdojo-social-link:nth-child(1) {
  background: linear-gradient(135deg, #3b5998, #5d7dc0);
}

.starlightdojo-social-link:nth-child(2) {
  background: linear-gradient(135deg, #1da1f2, #5eb8f5);
}

.starlightdojo-social-link:nth-child(3) {
  background: linear-gradient(135deg, #c32aa3, #f46f30);
}

.starlightdojo-social-link:nth-child(4) {
  background: linear-gradient(135deg, #7289da, #99aab5);
}

/* FAQ Accordion Styles */
.starlightdojo-accordion {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.starlightdojo-accordion-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.starlightdojo-accordion-header {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.starlightdojo-accordion-header h4 {
  font-size: 1.1rem;
  color: #fff;
  font-weight: 500;
}

.starlightdojo-accordion-header i {
  color: #a98aff;
  transition: all 0.3s ease;
}

.starlightdojo-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.starlightdojo-accordion-content p {
  padding: 0 20px 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.6;
}

.starlightdojo-accordion-item.active {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.starlightdojo-accordion-item.active .starlightdojo-accordion-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.starlightdojo-accordion-item.active .starlightdojo-accordion-header i {
  transform: rotate(180deg);
}

.starlightdojo-accordion-item.active .starlightdojo-accordion-content {
  max-height: 200px;
}

/* Floating Elements for Visual Interest */
.starlightdojo-contact-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.floating-element {
  position: absolute;
  border-radius: 50%;
  opacity: 0.2;
  animation: float-around 20s infinite ease-in-out;
}

.element-1 {
  top: 10%;
  left: 5%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #8e44ad, transparent 70%);
  animation-duration: 30s;
}

.element-2 {
  top: 60%;
  right: 5%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #3498db, transparent 70%);
  animation-duration: 25s;
  animation-delay: 5s;
}

.element-3 {
  bottom: 10%;
  left: 15%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #e74c3c, transparent 70%);
  animation-duration: 35s;
  animation-delay: 2s;
}

.element-4 {
  top: 30%;
  right: 20%;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, #2ecc71, transparent 70%);
  animation-duration: 28s;
  animation-delay: 7s;
}

@keyframes float-around {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(50px, 30px) rotate(90deg); }
  50% { transform: translate(0, 60px) rotate(180deg); }
  75% { transform: translate(-50px, 30px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}


/* ========== Legal Pages (opt-out, rsg, privacy, terms) ========== */
.starlightdojo-legal-page{
  padding:120px 5% 100px;          /* 80px + navbar offset */
  background:var(--background-light);
  min-height:100vh;
}

.starlightdojo-legal-page .starlightdojo-section-title{
  color:var(--primary-color);
  margin-bottom:50px;
  font-size:2.8rem;
}

.starlightdojo-legal-content{
  max-width:900px;
  margin:0 auto;
  background:#fff;
  padding:50px 40px;
  border-radius:20px;
  box-shadow:var(--shadow-medium);
  line-height:1.8;
  font-size:1.05rem;
  color:var(--text-dark);
}

.starlightdojo-legal-content h2{
  margin:40px 0 15px;
  font-size:1.5rem;
  color:var(--primary-color);
}

.starlightdojo-legal-content h3{
  margin:30px 0 12px;
  font-size:1.25rem;
  color:var(--secondary-color);
}

.starlightdojo-legal-content ul{
  list-style:disc inside;
  margin-left:15px;
}

.starlightdojo-legal-content li{
  margin:6px 0;
}

.starlightdojo-legal-content a{
  color:var(--accent-color);
  text-decoration:underline;
}

.starlightdojo-legal-content a:hover{
  color:var(--secondary-color);
}

/* Subtle fade-in on load */
.starlightdojo-legal-page{
  opacity:0;
  transform:translateY(30px);
  animation:legalFade 0.8s ease-out forwards;
}
@keyframes legalFade{
  to{opacity:1;transform:translateY(0);}
}

/* Responsive */
@media(max-width:768px){
  .starlightdojo-legal-content{
      padding:35px 25px;
  }
  .starlightdojo-legal-page .starlightdojo-section-title{
      font-size:2.2rem;
  }
}


/* ======== Cosmic Age-Gate Styling ======== */
#sd-agegate{
  position:fixed;inset:0;z-index:3000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#0a0a2a 0%,#040414 70%);
  overflow:hidden;font-family:'Rajdhani',sans-serif;color:#fff;
}
.sd-panel{
  text-align:center;margin-top:40px;max-width:420px;padding:0 25px;
  animation:fadeSlide 1s ease .6s both;
}
.sd-panel h2{font-size:2.4rem;letter-spacing:1px;color:#fbd437;margin-bottom:12px;}
.sd-panel p{font-size:1.1rem;opacity:.9;margin-bottom:30px;}

.sd-btn{
  position:relative;margin:0 10px;padding:14px 32px;
  border:none;border-radius:60px;font-size:1.1rem;font-weight:600;
  cursor:pointer;isolation:isolate;overflow:hidden;transition:transform .35s ease;
}
.sd-btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.25),rgba(255,255,255,0));
  transform:translateX(-100%);transition:transform .55s cubic-bezier(.4,.15,.2,1);
}
.sd-btn:hover{transform:translateY(-4px);}
.sd-btn:hover::before{transform:translateX(100%);}

/* Yes / No palettes */
.sd-btn.yes{background:#30d98f;box-shadow:0 0 15px rgba(48,217,143,.45);}
.sd-btn.no {background:#ff4c4c;box-shadow:0 0 15px rgba(255,76,76,.45);}

/* ✨ Stellar Backdrop */
#sd-stars{position:absolute;inset:0;z-index:-1;}

@keyframes fadeSlide{0%{opacity:0;transform:translateY(25px)}100%{opacity:1;transform:none}}

/* 🌀 Portal */
.sd-portal{position:absolute;width:280px;height:280px;pointer-events:none;}
.sd-portal .ring{
  position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.15);
  filter:blur(1px);animation:spin 20s linear infinite;
}
.sd-portal .r1{animation-duration:28s;border-color:#a98aff;}
.sd-portal .r2{animation-direction:reverse;border-color:#7acdff;}
.sd-portal .r3{animation-duration:14s;border-color:#ff7a7a;}
.sd-portal .core{
  position:absolute;top:50%;left:50%;width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffe16b 40%,rgba(0,0,0,0) 70%);
  transform:translate(-50%,-50%);box-shadow:0 0 25px 8px #ffe16b;
  animation:pulse 2.5s ease-in-out infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(.88)}50%{transform:translate(-50%,-50%) scale(1.12)}}

/* 🔮 Floating runes */
.sd-runes span{
  position:absolute;font-size:1.8rem;opacity:.4;pointer-events:none;
  animation:runeFloat 12s ease-in-out infinite;
}
.sd-runes span:nth-child(1){top:15%;left:18%;animation-delay:0s;}
.sd-runes span:nth-child(2){top:75%;left:22%;animation-delay:2s;font-size:2.2rem;}
.sd-runes span:nth-child(3){top:40%;left:80%;animation-delay:4s;}
.sd-runes span:nth-child(4){top:60%;left:60%;animation-delay:6s;font-size:2.4rem;}
.sd-runes span:nth-child(5){top:25%;left:70%;animation-delay:8s;}
@keyframes runeFloat{
  0%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-20px) rotate(180deg);}
  100%{transform:translateY(0) rotate(360deg);}
}


/* ================ Age Verification Pop-up Styles ================ */

/* Main Container */
.starlightdojo-age-verification {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
  perspective: 1000px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal Box */
.starlightdojo-age-modal {
  position: relative;
  width: 90%;
  max-width: 900px;
  min-height: 600px;
  background: linear-gradient(135deg, rgba(18, 6, 36, 0.9), rgba(30, 11, 56, 0.9));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  transform: rotateX(10deg) scale(0.9);
  transform-origin: center center;
  animation: modalEntrance 1.2s cubic-bezier(0.17, 0.67, 0.3, 1.33) forwards;
}

@keyframes modalEntrance {
  0% { transform: rotateX(30deg) scale(0.7); opacity: 0; }
  100% { transform: rotateX(0deg) scale(1); opacity: 1; }
}

/* Cosmic Background */
.starlightdojo-age-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.starlightdojo-cosmic-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      radial-gradient(1px 1px at 10px 10px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 20px 50px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 30px 30px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 50px 90px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 60px 40px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 70px 20px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 80px 80px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 90px 60px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 100px 30px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 100px 100px;
  animation: twinkle 4s infinite alternate;
  opacity: 0.5;
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 0.6; }
}

.starlightdojo-cosmic-nebula {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.2) 0%, rgba(138, 43, 226, 0) 40%),
      radial-gradient(circle at 80% 70%, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0) 40%),
      radial-gradient(circle at 50% 20%, rgba(231, 76, 60, 0.2) 0%, rgba(231, 76, 60, 0) 30%);
  animation: nebula-shift 30s infinite alternate;
}

@keyframes nebula-shift {
  0% { 
      transform: scale(1);
      background-image: 
          radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.2) 0%, rgba(138, 43, 226, 0) 40%),
          radial-gradient(circle at 80% 70%, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0) 40%),
          radial-gradient(circle at 50% 20%, rgba(231, 76, 60, 0.2) 0%, rgba(231, 76, 60, 0) 30%);
  }
  50% {
      transform: scale(1.2);
      background-image: 
          radial-gradient(circle at 30% 40%, rgba(138, 43, 226, 0.3) 0%, rgba(138, 43, 226, 0) 50%),
          radial-gradient(circle at 70% 60%, rgba(52, 152, 219, 0.3) 0%, rgba(52, 152, 219, 0) 50%),
          radial-gradient(circle at 40% 30%, rgba(231, 76, 60, 0.3) 0%, rgba(231, 76, 60, 0) 40%);
  }
  100% { 
      transform: scale(1);
      background-image: 
          radial-gradient(circle at 40% 50%, rgba(138, 43, 226, 0.2) 0%, rgba(138, 43, 226, 0) 40%),
          radial-gradient(circle at 60% 40%, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0) 40%),
          radial-gradient(circle at 30% 60%, rgba(231, 76, 60, 0.2) 0%, rgba(231, 76, 60, 0) 30%);
  }
}

.starlightdojo-cosmic-planets {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.starlightdojo-planet {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.3);
}

.starlightdojo-planet.planet-1 {
  top: 15%;
  right: 10%;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
  animation: planet-float 20s infinite ease-in-out;
}

.starlightdojo-planet.planet-2 {
  bottom: 20%;
  left: 5%;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ff7675, #d63031);
  animation: planet-float 15s 2s infinite ease-in-out reverse;
}

.starlightdojo-planet.planet-3 {
  top: 60%;
  right: 15%;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  animation: planet-float 18s 1s infinite ease-in-out;
}

@keyframes planet-float {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -10px) rotate(5deg); }
  50% { transform: translate(0, -20px) rotate(0deg); }
  75% { transform: translate(-10px, -10px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.starlightdojo-shooting-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.starlightdojo-shooting-star {
  position: absolute;
  height: 2px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1));
  animation: shooting-star 5s linear infinite;
  opacity: 0;
}

.starlightdojo-shooting-star.star-1 {
  top: 20%;
  left: 10%;
  width: 100px;
  transform: rotate(45deg);
  animation-delay: 0s;
}

.starlightdojo-shooting-star.star-2 {
  top: 50%;
  right: 5%;
  width: 150px;
  transform: rotate(-30deg);
  animation-delay: 2s;
}

.starlightdojo-shooting-star.star-3 {
  bottom: 30%;
  left: 30%;
  width: 80px;
  transform: rotate(20deg);
  animation-delay: 4s;
}

@keyframes shooting-star {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  5% { opacity: 1; }
  20% { opacity: 1; }
  30% { transform: translateX(300px) translateY(300px); opacity: 0; }
  100% { transform: translateX(300px) translateY(300px); opacity: 0; }
}

/* Glowing Border */
.starlightdojo-age-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-shadow: 
      inset 0 0 30px rgba(138, 43, 226, 0.5),
      0 0 30px rgba(138, 43, 226, 0.5);
  opacity: 0;
  animation: glow-pulse 4s 1s infinite alternate;
  pointer-events: none;
}

@keyframes glow-pulse {
  0% { 
      opacity: 0.3;
      box-shadow: 
          inset 0 0 30px rgba(138, 43, 226, 0.3),
          0 0 30px rgba(138, 43, 226, 0.3);
  }
  50% { 
      opacity: 0.6;
      box-shadow: 
          inset 0 0 40px rgba(138, 43, 226, 0.5),
          0 0 40px rgba(52, 152, 219, 0.5);
  }
  100% { 
      opacity: 0.3;
      box-shadow: 
          inset 0 0 30px rgba(52, 152, 219, 0.3),
          0 0 30px rgba(52, 152, 219, 0.3);
  }
}

/* Content Area */
.starlightdojo-age-content {
  position: relative;
  flex: 1;
  padding: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.starlightdojo-age-title {
  font-size: 3rem;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.7);
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.starlightdojo-age-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: linear-gradient(to right, rgba(138, 43, 226, 0), rgba(138, 43, 226, 1), rgba(138, 43, 226, 0));
}

.starlightdojo-age-text {
  margin-bottom: 30px;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 90%;
}

.starlightdojo-highlight {
  color: #a29bfe;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.starlightdojo-highlight::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: rgba(138, 43, 226, 0.2);
  z-index: -1;
  transform: skewX(-10deg);
}

/* Age Selector */
.starlightdojo-age-selector {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.starlightdojo-date-field {
  position: relative;
  width: 120px;
}

.starlightdojo-floating-label {
  position: absolute;
  top: -12px;
  left: 15px;
  padding: 0 5px;
  background: linear-gradient(135deg, rgba(18, 6, 36, 0.9), rgba(30, 11, 56, 0.9));
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

.starlightdojo-date-input {
  width: 100%;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.starlightdojo-date-input:hover,
.starlightdojo-date-input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: #a29bfe;
  outline: none;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
}

.starlightdojo-date-input::after {
  content: '▼';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #a29bfe;
  pointer-events: none;
}

.starlightdojo-input-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: transparent;
  box-shadow: 0 0 0 rgba(138, 43, 226, 0);
  transition: all 0.3s ease;
  z-index: 0;
  pointer-events: none;
}

.starlightdojo-date-input:focus + .starlightdojo-input-glow {
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
}

/* Error Message */
.starlightdojo-age-error {
  margin-bottom: 20px;
  color: #ff7675;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.starlightdojo-age-error.show {
  opacity: 1;
  transform: translateY(0);
}

.starlightdojo-age-error i {
  font-size: 1.2rem;
  animation: error-pulse 2s infinite;
}

@keyframes error-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Buttons */
.starlightdojo-age-buttons {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.starlightdojo-age-verify-btn {
  position: relative;
  padding: 15px 40px;
  background: transparent;
  border: 2px solid #a29bfe;
  border-radius: 50px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.starlightdojo-btn-galaxy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #8e44ad, #9b59b6);
  z-index: -1;
  transform: translateY(100%);
  transition: all 0.3s ease;
}

.starlightdojo-btn-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      radial-gradient(1px 1px at 10px 10px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 20px 50px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 30px 30px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 50px 50px;
  opacity: 0.3;
}

.starlightdojo-age-verify-btn:hover {
  border-color: transparent;
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.starlightdojo-age-verify-btn:hover .starlightdojo-btn-galaxy {
  transform: translateY(0);
}

.starlightdojo-age-verify-btn:active {
  transform: translateY(0);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.starlightdojo-age-exit-btn {
  padding: 15px 30px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.starlightdojo-age-exit-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

/* Disclaimer */
.starlightdojo-age-disclaimer {
  margin-top: 20px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 80%;
}

.starlightdojo-age-disclaimer a {
  color: #a29bfe;
  text-decoration: none;
  transition: all 0.3s ease;
}

.starlightdojo-age-disclaimer a:hover {
  color: #74b9ff;
  text-decoration: underline;
}

/* Mascot Animation */
.starlightdojo-age-mascot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 250px;
  height: 300px;
  transform: translateX(-30%);
  transition: all 0.5s ease;
  z-index: 5;
}

@media (min-width: 1200px) {
  .starlightdojo-age-mascot {
      transform: translateX(0);
  }
}

.starlightdojo-age-modal:hover .starlightdojo-age-mascot {
  transform: translateX(0);
}

.starlightdojo-mascot-character {
  position: relative;
  width: 100%;
  height: 100%;
}

.starlightdojo-mascot-head {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #8e44ad, #9b59b6);
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  animation: head-float 3s infinite ease-in-out;
}

@keyframes head-float {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
  100% { transform: translateX(-50%) translateY(0); }
}

.starlightdojo-mascot-head::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  top: 40px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.starlightdojo-mascot-head::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 50px;
  height: 10px;
  border-radius: 50%;
  box-shadow: -15px 0 0 0 #a29bfe, 15px 0 0 0 #a29bfe;
}

.starlightdojo-mascot-body {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 140px;
  background: linear-gradient(to bottom, #8e44ad, #6c5ce7);
  border-radius: 60px 60px 30px 30px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.starlightdojo-mascot-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.starlightdojo-mascot-effects::before,
.starlightdojo-mascot-effects::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  filter: blur(5px);
}

.starlightdojo-mascot-effects::before {
  width: 30px;
  height: 30px;
  top: 90px;
  left: 40px;
  animation: effect-pulse 3s infinite alternate;
}

.starlightdojo-mascot-effects::after {
  width: 40px;
  height: 40px;
  top: 120px;
  right: 30px;
  animation: effect-pulse 3s 1s infinite alternate;
}

@keyframes effect-pulse {
  0% { transform: scale(1); opacity: 0.2; }
  100% { transform: scale(1.5); opacity: 0.5; }
}

.starlightdojo-mascot-quote {
  position: absolute;
  top: 50px;
  right: 100%;
  width: 200px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 15px;
  color: #fff;
  font-style: italic;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateX(20px);
  z-index: 99999999;
  transition: all 0.5s ease;
}

.starlightdojo-mascot-quote::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid rgba(255, 255, 255, 0.1);
}

.starlightdojo-age-mascot:hover .starlightdojo-mascot-quote {
  opacity: 1;
  transform: translateX(0);
}

/* Animation States for Verification */
.starlightdojo-age-verification.verified .starlightdojo-age-modal {
  animation: verifiedExit 1s ease-in-out forwards;
}

@keyframes verifiedExit {
  0% { transform: rotateX(0deg) scale(1); opacity: 1; }
  100% { transform: rotateX(-30deg) scale(0.7); opacity: 0; }
}

.starlightdojo-age-verification.rejected .starlightdojo-age-glow {
  box-shadow: 
      inset 0 0 30px rgba(231, 76, 60, 0.5),
      0 0 30px rgba(231, 76, 60, 0.5);
  animation: none;
  opacity: 1;
}

.starlightdojo-age-verification.rejected .starlightdojo-age-modal {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

/* Loading Animation for Verification Process */
.starlightdojo-age-verify-btn.verifying .starlightdojo-btn-text {
  opacity: 0;
}

.starlightdojo-age-verify-btn.verifying::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Cosmic Portal Effect on Successful Verification */
.starlightdojo-cosmic-portal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #8e44ad, transparent);
  box-shadow: 0 0 50px #8e44ad, 0 0 100px #8e44ad;
  opacity: 0;
  z-index: 10001;
  pointer-events: none;
}

.starlightdojo-age-verification.verified .starlightdojo-cosmic-portal {
  animation: portal-open 2s ease-in-out forwards;
}

@keyframes portal-open {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}

/* Responsive Design */
@media (max-width: 992px) {
  .starlightdojo-age-modal {
      flex-direction: column;
      max-width: 600px;
      min-height: auto;
  }
  
  .starlightdojo-age-content {
      padding: 30px;
  }
  
  .starlightdojo-age-title {
      font-size: 2.5rem;
  }
  
  .starlightdojo-age-mascot {
      position: relative;
      width: 100%;
      height: 200px;
      transform: translateX(0);
      display: flex;
      justify-content: center;
  }
  
  .starlightdojo-mascot-quote {
      top: 0;
      right: auto;
      left: 50%;
      transform: translateX(-50%) translateY(-100%);
      opacity: 1;
      text-align: center;
  }
  
  .starlightdojo-mascot-quote::after {
      top: 100%;
      right: auto;
      left: 50%;
      transform: translateX(-50%);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid rgba(255, 255, 255, 0.1);
      border-bottom: none;
  }
}

@media (max-width: 576px) {
  .starlightdojo-age-selector {
      flex-direction: column;
      align-items: center;
      gap: 15px;
  }
  
  .starlightdojo-date-field {
      width: 100%;
      max-width: 200px;
  }
  
  .starlightdojo-age-buttons {
      flex-direction: column;
      width: 100%;
  }
  
  .starlightdojo-age-verify-btn,
  .starlightdojo-age-exit-btn {
      width: 100%;
  }
  
  .starlightdojo-age-title {
      font-size: 2rem;
  }
  
  .starlightdojo-mascot-character {
      transform: scale(0.8);
  }
}

/* Interactive Hover States */
.starlightdojo-age-modal:hover .starlightdojo-cosmic-stars {
  animation: twinkle 2s infinite alternate;
}

.starlightdojo-age-modal:hover .starlightdojo-planet {
  animation-duration: 10s;
}

/* Special Effects for Scroll and Input Focus */
.starlightdojo-date-input:focus {
  animation: input-glow 1.5s infinite alternate;
}

@keyframes input-glow {
  0% { border-color: rgba(162, 155, 254, 0.5); }
  100% { border-color: rgba(162, 155, 254, 1); }
}

/* Subtle Particle Animations Within Modal */
.starlightdojo-age-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 50px 160px, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0)),
      radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: subtle-float 100s linear infinite;
  pointer-events: none;
  opacity: 0.3;
  z-index: -1;
}

@keyframes subtle-float {
  0% { background-position: 0 0; }
  100% { background-position: 200px 200px; }
}

/* Accessibility Focus States */
.starlightdojo-date-input:focus,
.starlightdojo-age-verify-btn:focus,
.starlightdojo-age-exit-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.5);
}

/* Keyframe Animations for UI Elements */
@keyframes float-reveal {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.starlightdojo-age-title {
  animation: float-reveal 0.8s 0.2s ease-out forwards;
  opacity: 0;
}

.starlightdojo-age-text {
  animation: float-reveal 0.8s 0.4s ease-out forwards;
  opacity: 0;
}

.starlightdojo-age-selector {
  animation: float-reveal 0.8s 0.6s ease-out forwards;
  opacity: 0;
}

.starlightdojo-age-buttons {
  animation: float-reveal 0.8s 0.8s ease-out forwards;
  opacity: 0;
}

.starlightdojo-age-disclaimer {
  animation: float-reveal 0.8s 1s ease-out forwards;
  opacity: 0;
}

/* Dark Overlay Effect */
.starlightdojo-age-verification::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  animation: fade-in 1s ease-out forwards;
  z-index: -1;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 0.8; }
}


/* Stil actualizat pentru mascota poziționată în stânga */

/* Poziționarea mascotei în partea stângă */
.starlightdojo-age-mascot {
  position: absolute;
  bottom: 0;
  left: 0; /* Schimbat din right: 0 în left: 0 */
  width: 250px;
  height: 300px;
  transform: translateX(-20%) !important; /* Ajustat la -60% pentru a-l muta mai mult spre stânga */
  transition: all 0.5s ease;
  z-index: 5;
}

@media (min-width: 1200px) {
  .starlightdojo-age-mascot {
      transform: translateX(-50%); /* Menținem poziționarea spre stânga și pe ecrane mari */
  }
}

.starlightdojo-age-modal:hover .starlightdojo-age-mascot {
  transform: translateX(-40%); /* La hover se mișcă puțin spre dreapta, dar rămâne în stânga */
}

/* Stil pentru bulă de dialog (schimbat pentru a apărea în dreapta mascotei) */
.starlightdojo-mascot-quote {
  position: absolute;
  top: 50px;
  left: 100%; /* Schimbat din right: 100% în left: 100% */
  width: 200px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 15px;
  color: #fff;
  font-style: italic;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateX(-100px) !important; /* Schimbat din translateX(20px) în translateX(-20px) */
  transition: all 0.5s ease;
}

.starlightdojo-mascot-quote::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px; /* Schimbat din right: -10px în left: -10px */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgba(255, 255, 255, 0.1); /* Schimbat din border-left în border-right */
  border-left: none; /* Eliminat border-left */
}

.starlightdojo-age-mascot:hover .starlightdojo-mascot-quote {
  opacity: 1;
  transform: translateX(0);
}

/* Adaptare pentru dispozitive mobile */
@media (max-width: 992px) {
  .starlightdojo-age-mascot {
      position: relative;
      width: 100%;
      height: 200px;
      transform: translateX(0);
      display: flex;
      justify-content: center;
      order: -1; /* Afișează mascota deasupra conținutului pe mobile */
  }
  
  .starlightdojo-mascot-quote {
      top: 0;
      left: auto;
      right: auto;
      width: 80%;
      max-width: 300px;
      transform: translateY(-120%);
      opacity: 1;
      text-align: center;
  }
  
  .starlightdojo-mascot-quote::after {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid rgba(255, 255, 255, 0.1);
      border-bottom: none;
  }
  
  .starlightdojo-age-modal {
      flex-direction: column;
  }
}

/* Ajustare pentru ecrane foarte mari */
@media (min-width: 1400px) {
  .starlightdojo-age-mascot {
      transform: translateX(-65%); /* Poziționare și mai în stânga pe ecrane foarte mari */
  }
  
  .starlightdojo-age-modal:hover .starlightdojo-age-mascot {
      transform: translateX(-55%); /* La hover se mișcă puțin spre dreapta, dar rămâne la distanță de text */
  }
}


/* Stil pentru bulă de dialog (schimbat pentru a apărea în dreapta mascotei) */
.starlightdojo-mascot-quote {
  position: absolute;
  top: 50px;
  left: 100%; /* Schimbat din right: 100% în left: 100% */
  width: 200px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 15px;
  color: #fff;
  font-style: italic;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateX(-80px); /* Schimbat din translateX(20px) în translateX(-20px) */
  transition: all 0.5s ease;
}

.starlightdojo-mascot-quote::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px; /* Schimbat din right: -10px în left: -10px */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgba(255, 255, 255, 0.1); /* Schimbat din border-left în border-right */
  border-left: none; /* Eliminat border-left */
}

.starlightdojo-age-mascot:hover .starlightdojo-mascot-quote {
  opacity: 1;
  transform: translateX(0);
}

/* Adaptare pentru dispozitive mobile */
@media (max-width: 992px) {
  .starlightdojo-age-mascot {
      position: relative;
      width: 100%;
      height: 200px;
      transform: translateX(0);
      display: flex;
      justify-content: center;
      order: -1; /* Afișează mascota deasupra conținutului pe mobile */
  }
  
  .starlightdojo-mascot-quote {
      top: 0;
      left: auto;
      right: auto;
      width: 80%;
      max-width: 300px;
      transform: translateY(-120%);
      opacity: 1;
      text-align: center;
  }
  
  .starlightdojo-mascot-quote::after {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid rgba(255, 255, 255, 0.1);
      border-bottom: none;
  }
  
  .starlightdojo-age-modal {
      flex-direction: column;
  }
}



/* CSS îmbunătățit pentru dropdown-uri */

/* Stilizare pentru câmpurile de dată */
.starlightdojo-date-field {
    position: relative;
    width: 120px;
}

/* Stilizare pentru etichete flotante */
.starlightdojo-floating-label {
    position: absolute;
    top: -12px;
    left: 15px;
    padding: 0 5px;
    background: linear-gradient(135deg, rgba(18, 6, 36, 0.9), rgba(30, 11, 56, 0.9));
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9); /* Mai vizibil */
    z-index: 1;
    font-weight: 600; /* Mai bold */
}

/* Îmbunătățiri pentru dropdown */
.starlightdojo-date-input {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1); /* Mai vizibil */
    border: 2px solid rgba(162, 155, 254, 0.5); /* Bordură mai vizibilă */
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    font-weight: 500; /* Text mai bold */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Umbră pentru adâncime */
}

/* Adăugare săgeată dropdown personalizată */
.starlightdojo-date-field::after {
    content: '\25BC'; /* Săgeată dropdown */
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(162, 155, 254, 0.8);
    pointer-events: none;
    z-index: 2;
    font-size: 0.8rem;
}

/* Stilizare hover & focus */
.starlightdojo-date-input:hover,
.starlightdojo-date-input:focus {
    background: rgba(255, 255, 255, 0.2); /* Mai evident la hover/focus */
    border-color: rgba(162, 155, 254, 0.8);
    outline: none;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.4);
}

/* Opțiunile din dropdown */
.starlightdojo-date-input option {
    background-color: #1e0b38; /* Fundal închis */
    color: #fff; /* Text alb */
    padding: 10px; /* Padding mai mare */
    font-size: 1rem;
}

/* Placeholder text */
.starlightdojo-date-input option[disabled],
.starlightdojo-date-input option[value=""] {
    color: rgba(255, 255, 255, 0.5);
}

/* Optimizare pentru Safari și Chrome */
@supports (-webkit-appearance: none) {
    .starlightdojo-date-input {
        background-image: 
            linear-gradient(45deg, transparent 50%, rgba(162, 155, 254, 0.8) 50%),
            linear-gradient(135deg, rgba(162, 155, 254, 0.8) 50%, transparent 50%);
        background-position: 
            calc(100% - 20px) calc(50% - 3px),
            calc(100% - 15px) calc(50% - 3px);
        background-size: 
            5px 5px,
            5px 5px;
        background-repeat: no-repeat;
    }
    
    .starlightdojo-date-field::after {
        content: '';
    }
}

/* Stilizare pentru opțiunea selectată */
.starlightdojo-date-input:not([value=""]):not([value="DD"]):not([value="MM"]):not([value="YYYY"]) {
    background-color: rgba(162, 155, 254, 0.2);
    color: white;
    font-weight: 600;
}

/* Efect de strălucire pentru dropdown-uri */
.starlightdojo-date-input:focus ~ .starlightdojo-input-glow {
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.6);
    opacity: 1;
}

.starlightdojo-input-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 0 0 rgba(138, 43, 226, 0);
    transition: all 0.3s ease;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* Stilizare specifică pentru chrome și safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .starlightdojo-date-input {
        padding-right: 30px; /* Spațiu pentru săgeată */
    }
}

/* Stilizare opțiuni pentru Firefox */
@-moz-document url-prefix() {
    .starlightdojo-date-input {
        text-indent: 0.01px;
        text-overflow: ellipsis;
    }
    
    .starlightdojo-date-input option {
        background-color: #2e0f52;
        padding: 10px 15px;
    }
}

/* Efect de animație pentru săgeata dropdown */
.starlightdojo-date-field:hover::after {
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    from { transform: translateY(-50%); }
    to { transform: translateY(-40%); }
}