/* ============================================
   MEMORY CARDS - Mystical Night Sky Theme!
   A card-matching game with beautiful 3D flips
   and a magical starry background.
   ============================================ */

:root {
    /* Night sky colors */
    --sky-dark: #1a1a3e;
    --sky-mid: #2d1b69;
    --sky-light: #4a2c8a;

    /* Card colors */
    --card-back-1: #667eea;
    --card-back-2: #764ba2;
    --card-front: #ffffff;
    --card-matched-glow: rgba(255, 215, 0, 0.6);

    /* Card sizing (changes with responsive breakpoints) */
    --card-width: 100px;
    --card-height: 120px;
    --card-gap: 10px;
    --card-radius: 14px;

    /* UI colors */
    --star-gold: #ffc107;
    --text-light: #e8e0f0;
    --text-mid: #b8a9d4;
    --text-dark: #2d1b69;
    --accent-purple: #9c27b0;
    --accent-pink: #e040fb;

    /* Icon colors for each card type */
    --icon-pets: #e91e63;
    --icon-favorite: #f44336;
    --icon-star: #ffc107;
    --icon-bolt: #ff9800;
    --icon-music: #9c27b0;
    --icon-florist: #4caf50;
    --icon-sunny: #ffeb3b;
    --icon-night: #3f51b5;
    --icon-rocket: #2196f3;
    --icon-cake: #ff5722;
}

/* ====== RESET ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

body {
    font-family: 'Nunito', sans-serif;
    color: var(--text-light);
    /* Beautiful deep purple night sky gradient */
    background: linear-gradient(160deg,
        var(--sky-dark) 0%,
        var(--sky-mid) 50%,
        var(--sky-light) 100%
    );
    -webkit-user-select: none;
    user-select: none;
}

/* Material Symbols base style - filled icons */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ============================================
   SCENIC BACKGROUND - Mystical Night Sky!
   Stars twinkle, moon glows, orbs float.
   All pure CSS, no images needed.
   ============================================ */
.scene {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* ====== TWINKLING STARS ====== */
/* Stars are created by JS and placed in .scene */
.star-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    animation: twinkle var(--duration) ease-in-out infinite;
    opacity: 0;
}

/* Some stars are bigger and brighter */
.star-particle.big {
    width: 4px;
    height: 4px;
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.4);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ====== CRESCENT MOON ====== */
.moon {
    position: absolute;
    top: 30px;
    right: 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    /* The crescent is made with a box-shadow trick! */
    box-shadow:
        -12px 0 0 0 #f5e6a3,
        -12px 0 20px 2px rgba(245, 230, 163, 0.3);
    animation: moonGlow 4s ease-in-out infinite;
}

@keyframes moonGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

/* ====== FLOATING LIGHT ORBS ====== */
.orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 60%);
    animation: orbFloat var(--duration, 8s) ease-in-out infinite;
    opacity: 0.4;
}

.orb-1 {
    width: 80px; height: 80px;
    top: 20%; left: 10%;
    --duration: 10s;
    background: radial-gradient(circle, rgba(224, 64, 251, 0.2), transparent 60%);
}

.orb-2 {
    width: 50px; height: 50px;
    top: 60%; right: 15%;
    --duration: 12s;
    animation-delay: -3s;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.25), transparent 60%);
}

.orb-3 {
    width: 100px; height: 100px;
    bottom: 20%; left: 20%;
    --duration: 14s;
    animation-delay: -6s;
    background: radial-gradient(circle, rgba(156, 39, 176, 0.15), transparent 60%);
}

.orb-4 {
    width: 40px; height: 40px;
    top: 40%; right: 30%;
    --duration: 9s;
    animation-delay: -2s;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.15), transparent 60%);
}

.orb-5 {
    width: 60px; height: 60px;
    top: 15%; left: 50%;
    --duration: 11s;
    animation-delay: -5s;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.2), transparent 60%);
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(20px, -15px); }
    50% { transform: translate(-10px, 20px); }
    75% { transform: translate(15px, 10px); }
}

/* ============================================
   GAME CONTAINER
   ============================================ */
#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    padding: 8px;
    position: relative;
    z-index: 2;
}

/* ====== HUD (Head-Up Display) ====== */
#hud {
    width: 100%;
    max-width: 800px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 5;
}

/* Back button - takes you back to the game portal */
.back-btn {
    position: absolute;
    left: 8px;
    top: 8px;
    color: var(--text-light);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Mute button - toggles sound on/off */
.mute-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background 0.2s;
}

.mute-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Game title in the HUD */
.hud-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hud-title h1 {
    font-family: 'Fredoka One', cursive;
    font-size: 1.4em;
    color: #fff;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(224, 64, 251, 0.3);
}

.hud-icon {
    font-size: 30px !important;
    color: var(--accent-pink);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* Stats bar - frosted glass style */
.hud-stats {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    padding: 6px 20px;
    border-radius: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.95em;
    font-weight: 700;
    color: var(--text-light);
}

.hud-item .material-symbols-rounded {
    font-size: 20px;
    color: var(--accent-pink);
}

/* ============================================
   CARD AREA - Where the magic happens!
   ============================================ */
#card-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 3;
}

/* The grid that holds all the cards */
#card-grid {
    display: grid;
    gap: var(--card-gap);
    justify-content: center;
    align-content: center;
    padding: 10px;
}

/* ============================================
   MEMORY CARD - 3D Flip Animation!
   Each card has a front and a back.
   We use CSS 3D transforms to flip them.
   ============================================ */
.memory-card {
    width: var(--card-width);
    height: var(--card-height);
    perspective: 600px;
    cursor: pointer;
    /* Staggered entrance animation */
    animation: cardAppear 0.4s ease-out backwards;
}

/* The inner container rotates to create the flip */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* When a card is flipped, rotate it 180 degrees */
.memory-card.flipped .card-inner {
    transform: rotateY(180deg);
}

/* Both faces of the card share these styles */
.card-front,
.card-back {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ====== CARD BACK - The mystery side! ====== */
.card-back {
    background: linear-gradient(135deg, var(--card-back-1), var(--card-back-2));
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.card-back .material-symbols-rounded {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.6);
}

/* ====== CARD FRONT - Shows the icon! ====== */
.card-front {
    background: var(--card-front);
    transform: rotateY(180deg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(0, 0, 0, 0.05);
    flex-direction: column;
    gap: 2px;
}

.card-front .material-symbols-rounded {
    font-size: 42px;
}

/* ====== ICON COLOR CLASSES ====== */
/* Each card icon gets its own fun color */
.icon-pets { color: var(--icon-pets); }
.icon-favorite { color: var(--icon-favorite); }
.icon-star { color: var(--icon-star); }
.icon-bolt { color: var(--icon-bolt); }
.icon-music_note { color: var(--icon-music); }
.icon-local_florist { color: var(--icon-florist); }
.icon-wb_sunny { color: var(--icon-sunny); }
.icon-nightlight { color: var(--icon-night); }
.icon-rocket_launch { color: var(--icon-rocket); }
.icon-cake { color: var(--icon-cake); }

/* ====== MATCHED STATE - Golden glow! ====== */
.memory-card.matched {
    pointer-events: none;
}

.memory-card.matched .card-front {
    box-shadow:
        0 0 20px var(--card-matched-glow),
        0 0 40px rgba(255, 215, 0, 0.3);
    border-color: var(--star-gold);
    animation: matchPulse 0.6s ease-out;
}

@keyframes matchPulse {
    0% { transform: rotateY(180deg) scale(1); }
    50% { transform: rotateY(180deg) scale(1.1); }
    100% { transform: rotateY(180deg) scale(1); }
}

/* ====== MISMATCH STATE - Shake! ====== */
.memory-card.mismatched .card-inner {
    animation: cardShake 0.4s ease-out;
}

@keyframes cardShake {
    0%, 100% { transform: rotateY(180deg) translateX(0); }
    20% { transform: rotateY(180deg) translateX(-8px); }
    40% { transform: rotateY(180deg) translateX(8px); }
    60% { transform: rotateY(180deg) translateX(-5px); }
    80% { transform: rotateY(180deg) translateX(5px); }
}

/* ====== CARD ENTRANCE ANIMATION ====== */
@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Prevent clicking while cards are being checked */
.memory-card.flipped {
    pointer-events: none;
}

/* ============================================
   OVERLAY SCREENS
   Same frosted-glass pattern as project-2!
   ============================================ */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 62, 0.9);
    backdrop-filter: blur(10px);
    z-index: 50;
    animation: fadeIn 0.4s ease-out;
}

.overlay.hidden { display: none; }

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

.overlay-box {
    background: linear-gradient(160deg, #2d1b69, #1a1a3e);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: 36px 32px;
    text-align: center;
    max-width: 420px;
    width: 90%;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(156, 39, 176, 0.15);
    animation: slideUp 0.5s ease-out;
}

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

.overlay-icon {
    font-size: 72px !important;
    display: block;
    margin-bottom: 12px;
}

.start-icon {
    color: var(--accent-pink);
    filter: drop-shadow(0 3px 8px rgba(224, 64, 251, 0.4));
    animation: iconBounce 2s ease-in-out infinite;
}

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

.overlay-box h2 {
    font-family: 'Fredoka One', cursive;
    font-size: 1.9em;
    margin-bottom: 8px;
    color: #fff;
}

.win-box h2 {
    background: linear-gradient(135deg, #ffc107, #ff6f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.overlay-box p {
    color: var(--text-mid);
    margin-bottom: 8px;
}

/* ====== DIFFICULTY SELECTOR ====== */
.difficulty-selector {
    margin: 16px 0;
}

.difficulty-label {
    font-family: 'Fredoka One', cursive;
    font-size: 1em;
    color: var(--text-light) !important;
    margin-bottom: 10px !important;
}

.difficulty-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.diff-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 18px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.2s;
}

.diff-btn .material-symbols-rounded {
    font-size: 28px;
}

.diff-detail {
    font-size: 0.75em;
    opacity: 0.6;
}

.diff-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Active/selected difficulty button */
.diff-btn.active {
    background: linear-gradient(135deg, var(--card-back-1), var(--card-back-2));
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* ====== STARS DISPLAY (Win Screen) ====== */
.stars-display {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.star-icon {
    font-size: 50px !important;
    color: rgba(255, 255, 255, 0.15);
    transition: color 0.3s, transform 0.5s;
}

.star-icon.earned {
    color: var(--star-gold);
    filter: drop-shadow(0 2px 8px rgba(255, 193, 7, 0.5));
    animation: starPop 0.5s ease-out backwards;
}

@keyframes starPop {
    0% { transform: scale(0) rotate(-45deg); }
    70% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Win screen stats */
.win-stats-grid {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 12px 0;
}

.win-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--text-light);
}

.win-stat .material-symbols-rounded {
    font-size: 22px;
    color: var(--accent-pink);
}

.win-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

/* ====== BUTTONS ====== */
.game-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border: none;
    border-radius: 18px;
    font-family: 'Fredoka One', cursive;
    font-size: 1.15em;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
    margin-top: 8px;
}

.game-btn:hover { transform: translateY(-2px); }
.game-btn:active { transform: translateY(0); }

.primary-btn {
    background: linear-gradient(135deg, var(--card-back-1), var(--card-back-2));
    color: white;
    box-shadow: 0 4px 18px rgba(102, 126, 234, 0.4);
}

.primary-btn:hover {
    box-shadow: 0 6px 24px rgba(102, 126, 234, 0.55);
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-mid);
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ====== PARTICLES (Celebration Effects) ====== */
#particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    animation: particleBurst var(--duration) ease-out forwards;
}

.particle.sparkle {
    border-radius: 2px;
    transform: rotate(45deg);
}

@keyframes particleBurst {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot, 180deg));
        opacity: 0;
    }
}

/* ============================================
   RESPONSIVE DESIGN
   Cards resize for different screen sizes
   so the game works on phones AND big screens.
   ============================================ */

/* Mobile phones */
@media (max-width: 480px) {
    :root {
        --card-width: 65px;
        --card-height: 80px;
        --card-gap: 6px;
        --card-radius: 10px;
    }
    #hud { padding: 4px 8px; }
    .hud-title h1 { font-size: 1em; }
    .hud-stats { gap: 10px; font-size: 0.85em; padding: 4px 12px; }
    .overlay-box { padding: 24px 20px; }
    .overlay-box h2 { font-size: 1.4em; }
    .card-back .material-symbols-rounded { font-size: 24px; }
    .card-front .material-symbols-rounded { font-size: 28px; }
    .moon { width: 40px; height: 40px; top: 12px; right: 25px; }
    .diff-btn { padding: 10px 14px; font-size: 0.85em; }
}

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --card-width: 80px;
        --card-height: 96px;
        --card-gap: 8px;
        --card-radius: 12px;
    }
    .card-front .material-symbols-rounded { font-size: 34px; }
}

/* Large tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --card-width: 90px;
        --card-height: 108px;
    }
    .card-front .material-symbols-rounded { font-size: 38px; }
}

/* Desktop */
@media (min-width: 1025px) {
    :root {
        --card-width: 100px;
        --card-height: 120px;
    }
}

/* Landscape mode on mobile - make cards smaller so they fit */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --card-width: 55px;
        --card-height: 66px;
        --card-gap: 5px;
        --card-radius: 8px;
    }
    #hud { padding: 2px 8px; }
    .hud-title h1 { font-size: 0.9em; }
    .hud-stats { padding: 3px 10px; }
    .card-back .material-symbols-rounded { font-size: 20px; }
    .card-front .material-symbols-rounded { font-size: 24px; }
}

/* Hero credit badge - stylish pink banner */
.created-by {
    text-align: center;
    font-family: 'Fredoka One', cursive;
    font-size: 1.2em;
    margin: 12px auto;
    padding: 10px 28px;
    color: #fff;
    background: linear-gradient(135deg, #E91E63, #FF4081, #F50057);
    border-radius: 30px;
    display: block;
    width: fit-content;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 4;
    position: relative;
    animation: createdByGlow 2s ease-in-out infinite alternate;
}

@keyframes createdByGlow {
    from { box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4); }
    to   { box-shadow: 0 4px 25px rgba(233, 30, 99, 0.7), 0 0 40px rgba(255, 64, 129, 0.3); }
}