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

:root {
    --primary-color: #6f86ff;
    --secondary-color: #ff6b9d;
    --accent-color: #ffd700;
    --dark-bg: #0f0f23;
    --card-bg: #1a1a3f;
    --text-light: #e0e0e0;
    --text-primary: #ffffff;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--dark-bg) 0%, #1a0f2e 100%);
    color: var(--text-light);
    overflow-x: hidden;
    min-height: 100vh;
}

.hidden {
    display: none !important;
}

/* Animare stele de fundal */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        100px 100px white, 200px 50px white, 300px 150px white,
        400px 80px white, 500px 120px white, 600px 40px white,
        50px 200px white, 150px 300px white, 250px 250px white,
        350px 400px white, 450px 350px white, 550px 450px white,
        700px 200px white, 800px 300px white, 900px 100px white;
    animation: twinkle 5s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Menu Principal */
.menu-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.menu-content {
    text-align: center;
    animation: slideInDown 0.8s ease-out;
}

.title {
    font-size: 3.5rem;
    font-weight: bold;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    text-shadow: 0 0 30px rgba(111, 134, 255, 0.5);
}

.subtitle {
    font-size: 1.3rem;
    color: var(--text-light);
    margin-bottom: 50px;
    font-weight: 300;
}

/* Grid Jocuri */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.game-card {
    background: linear-gradient(135deg, var(--card-bg) 0%, #2d1b4e 100%);
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 30px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    animation: slideInUp 0.6s ease-out;
}

.game-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(111, 134, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.game-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
    box-shadow: 0 20px 40px rgba(111, 134, 255, 0.4);
}

.game-card:hover::before {
    opacity: 1;
}

.game-icon {
    font-size: 4rem;
    margin-bottom: 15px;
    display: block;
    animation: float 3s ease-in-out infinite;
}

.game-card h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--accent-color);
}

.game-card p {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.5;
}

.btn-play {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(111, 134, 255, 0.3);
    pointer-events: auto;
    z-index: 10;
    position: relative;
}

.btn-play:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(111, 134, 255, 0.5);
}

.btn-play:active {
    transform: scale(0.98);
}

/* Game Container */
.game-container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.game-container.hidden {
    display: none;
}

.btn-back {
    align-self: flex-start;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1rem;
    margin-bottom: 20px;
    transition: all 0.3s;
}

.btn-back:hover {
    background: var(--secondary-color);
    transform: translateX(-5px);
}

#gameContent {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animații */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* Responsive */
@media (max-width: 768px) {
    .title {
        font-size: 2.5rem;
    }
    
    .subtitle {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }
    
    .games-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .game-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: 2rem;
    }
    
    .games-grid {
        gap: 15px;
    }
}

/* Stiluri pentru jocuri */
.chess-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    background: #333;
    border: 3px solid var(--primary-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(111, 134, 255, 0.5);
}

.chess-square {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.chess-square:hover {
    transform: scale(1.1);
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.4);
}

.chess-square.white {
    background: #f0e68c; /* galben pal */
}

.chess-square.black {
    background: #4a4a4a;
}

/* Classic chess piece image styling */
.chess-piece {
    width: 44px;
    height: 44px;
    display: inline-block;
}

.chess-piece img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.solitaire-container,
.domino-container,
.mahjong-container {
    background: var(--card-bg);
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 30px;
    max-width: 800px;
    box-shadow: 0 0 30px rgba(111, 134, 255, 0.3);
}

.game-title {
    text-align: center;
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 20px;
}