/* Global */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #fff8f0;
}

/* Header */
header {
    background: linear-gradient(90deg, #d4af37, #ffd700);
    padding: 15px 20px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
header h1 { margin:0; font-size:24px; }
nav a {
    color:#fff;
    text-decoration:none;
    margin:0 10px;
    font-weight:bold;
}
nav a:hover { text-decoration:underline; }

/* Main Sections */
.main-section { text-align:center; padding:30px 20px; }
.main-section img {
    max-width:200px;
    margin:10px;
    border-radius:15px;
    box-shadow:0 4px 6px rgba(0,0,0,0.2);
}

/* Games Grid */
.games-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
    padding:20px;
}
.game-card {
    background:#fff;
    border-radius:15px;
    padding:15px;
    box-shadow:0 4px 8px rgba(0,0,0,0.2);
    text-decoration:none;
    color:#000;
    transition: transform 0.2s;
}
.game-card:hover { transform: scale(1.05); }
.game-card-icon { font-size:40px; margin-bottom:10px; }

/* Footer */
footer {
    text-align:center;
    padding:15px;
    background:#f0e68c;
    margin-top:30px;
}

/* Buttons */
button {
    padding:10px 15px;
    margin:5px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:#4caf50;
    color:white;
}
button:hover { opacity:0.9; }
.back-button { background:#555; color:white; padding:8px 12px; border-radius:5px; text-decoration:none; display:inline-block; margin-bottom:15px; }

/* Audio Cards */
.track-card {
    margin:20px auto;
    padding:15px;
    border-radius:15px;
    background:#ffffff;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    width:90%;
    max-width:400px;
}
.track-button { padding:10px 15px; margin:10px; background:#00acc1; color:white; border:none; border-radius:8px; cursor:pointer; }
.progress-bar, .volume { width:80%; margin:10px; }