* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Boogaloo', sans-serif; 
}

body {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #333;
    overflow-x: hidden;
}

.container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Orientation Warning for Mobile */
.orientation-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 20000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    text-align: center;
    padding: 20px;
}

.orientation-warning i {
    font-size: 4rem;
    margin-bottom: 20px;
    color: #FFD700;
    animation: rotate 2s infinite linear;
}

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

.orientation-warning h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.orientation-warning p {
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 80%;
}

/* Main Menu */
.main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease;
    padding: 20px;
}

.main-menu.hidden {
    opacity: 0;
    visibility: hidden;
}

.menu-content {
    background: linear-gradient(135deg, #FFFFFF 0%, #E3F2FD 100%);
    padding: 30px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border: 4px solid #667eea;
    width: 100%;
    backdrop-filter: blur(10px);
    max-width: 80vw;
    max-height: 80vh;
    overflow-y: auto;
}

.menu-title {
    font-size: clamp(2.5rem, 6vw, 4rem); 
    font-weight: 900;
    margin-bottom: 5px;
    padding-top: 10px;
    color: #00BCD4;
    text-shadow: 
        -1px -1px 0 #FFFFFF, 
        1px -1px 0 #FFFFFF, 
        -1px 1px 0 #FFFFFF, 
        1px 1px 0 #FFFFFF, 
        -4px -4px 0 #000000, 
        4px -4px 0 #000000, 
        -4px 4px 0 #000000, 
        4px 4px 0 #000000,
        8px 8px 0 #FF4081,
        10px 10px 0 rgba(0, 0, 0, 0.2); 
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-title i {
    font-size: clamp(1.5rem, 4vw, 3rem); 
    margin: 0 10px; 
    color: #00BCD4; 
    text-shadow: 
        -2px -2px 0 #000000, 
        2px 2px 0 #FF4081;
}

.menu-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 600;
    color: #37474F;
    margin-bottom: 25px;
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.8),
        1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Kontainer Opsi Tema */
.theme-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px;
    border-radius: 15px;
    background-color: #f0f8ff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
}

@media (max-width: 992px) {
    .theme-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .theme-options {
        grid-template-columns: 1fr;
    }
}

/* Gaya Tombol Tema */
.theme-btn {
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 12px;
    border: 3px solid;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-btn i {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.theme-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.theme-btn.active {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 8px 25px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.8);
}

/* Warna untuk setiap tema */
.theme-btn[data-theme="buah"] {
    background: linear-gradient(135deg, #FFB6C1, #FF69B4);
    border-color: #FF69B4;
    color: white;
}

.theme-btn[data-theme="transportasi"] {
    background: linear-gradient(135deg, #87CEEB, #1E90FF);
    border-color: #1E90FF;
    color: white;
}

.theme-btn[data-theme="hewan"] {
    background: linear-gradient(135deg, #DDA0DD, #BA55D3);
    border-color: #BA55D3;
    color: white;
}

.theme-btn[data-theme="rumah"] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FFA500;
    color: white;
}

.theme-btn[data-theme="tulis"] {
    background: linear-gradient(135deg, #98FB98, #32CD32);
    border-color: #32CD32;
    color: white;
}

.theme-btn[data-theme="warna"] {
    background: linear-gradient(135deg, #FFA07A, #FF6347);
    border-color: #FF6347;
    color: white;
}

.theme-btn[data-theme="bentuk"] {
    background: linear-gradient(135deg, #E0FFFF, #40E0D0);
    border-color: #40E0D0;
    color: #333;
}

.theme-btn[data-theme="angka"] {
    background: linear-gradient(135deg, #F0E68C, #DAA520);
    border-color: #DAA520;
    color: #333;
}

.theme-btn[data-theme="huruf"] {
    background: linear-gradient(135deg, #FAD7A1, #E59866);
    border-color: #E59866;
    color: #333;
}

/* Header */
header {
    text-align: center;
    padding: 15px;
    background: 
        linear-gradient(135deg, #a8d8ea 0%, #caf0f8 50%, #90e0ef 100%),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(178, 223, 238, 0.6) 0%, transparent 50%);
    border-radius: 10px;
    box-shadow: 
        0 10px 30px rgba(168, 216, 234, 0.4),
        inset 0 0 0 3px rgba(255,255,255,0.8);
    border: 3px solid #ffffff;
    position: relative;
    overflow: hidden;
    min-height: 60px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23ffffff" opacity="0.3"/><circle cx="80" cy="40" r="1.5" fill="%23ffffff" opacity="0.3"/><circle cx="40" cy="80" r="1" fill="%23ffffff" opacity="0.3"/><circle cx="60" cy="60" r="1.5" fill="%23ffffff" opacity="0.3"/></svg>');
    z-index: 0;
}

h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    color: #0077b6;
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
    text-shadow: 
        2px 2px 4px rgba(255,255,255,0.8),
        0 0 10px rgba(0, 119, 182, 0.2);
    margin-bottom: 5px;
}


/* =============================== */
/* GAME AREA - MULTIPLAYER LAYOUT */
/* =============================== */
.game-area {
    display: flex;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

/* Player Panels - MULTIPLAYER */
.player-panel {
    flex: 1;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFEBEE 100%);
    border-radius: 18px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(244, 67, 54, 0.15);
    border: 3px solid #FFCDD2;
    backdrop-filter: blur(10px);
    overflow: hidden;
    min-height: 0;
    position: relative;
    min-width: 0;
}

.player-panel.player1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #FF5252, #FF8A80);
    border-radius: 18px 18px 0 0;
}

.player-panel.player2 {
    background: linear-gradient(135deg, #FFFFFF 0%, #E3F2FD 100%);
    box-shadow: 0 8px 32px rgba(33, 150, 243, 0.15);
    border: 3px solid #BBDEFB;
}

.player-panel.player2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #2196F3, #64B5F6);
    border-radius: 18px 18px 0 0;
}

.player-title {
    text-align: center;
    margin-bottom: 12px;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: #333;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    border: 2px solid;
    flex-shrink: 0;
    font-weight: bold;
}

.player1 .player-title {
    border-color: #FF5252;
    color: #D32F2F;
    background: linear-gradient(135deg, #FFEBEE, #FFFFFF);
}

.player2 .player-title {
    border-color: #2196F3;
    color: #1565C0;
    background: linear-gradient(135deg, #E3F2FD, #FFFFFF);
}

.player-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
    flex: 1;
    min-height: 0;
    padding: 6px;
}

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: clamp(1rem, 2.8vw, 1.5rem);
    font-weight: bold;
    cursor: pointer;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 0 0 2px rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.9);
    min-height: 0;
    aspect-ratio: 1;
    max-width: 100%;
    max-height: 100%;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent);
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Styling untuk tile dengan gambar/ikon */
.tile.with-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8%;
    padding: 3%;
}

.tile-icon {
    font-size: min(3rem, 10vw);
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 2;
    min-height: 0;
}

.tile-label {
    font-size: min(1.2rem, 4vw);
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    line-height: 1.1;
    text-align: center;
    flex: 1;
    min-height: 0;
    padding: 0 2px;
}

/* Untuk tile angka dan huruf yang tidak menggunakan ikon */
.tile.with-text {
    font-size: 1.5rem;
    font-weight: bold;
}

/* HOVER EFFECT */
.tile:hover {
    transform: scale(1.1) rotate(2deg);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.25),
        0 0 0 2px rgba(255, 255, 255, 1),
        0 0 15px rgba(255, 255, 255, 0.6);
    z-index: 5;
}

.tile:hover::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.6), transparent);
}

/* SELECTED EFFECT */
.tile.selected {
    transform: scale(1.15) rotate(-2deg);
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.8),
        0 0 0 3px #FFD700,
        0 0 20px rgba(255, 215, 0, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.8);
    z-index: 10;
    border-color: #FFD700;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { 
        box-shadow: 
            0 0 25px rgba(255, 215, 0, 0.8),
            0 0 0 3px #FFD700,
            0 0 20px rgba(255, 215, 0, 0.6),
            inset 0 0 15px rgba(255, 255, 255, 0.8);
    }
    50% { 
        box-shadow: 
            0 0 35px rgba(255, 215, 0, 1),
            0 0 0 4px #FFD700,
            0 0 25px rgba(255, 215, 0, 0.8),
            inset 0 0 20px rgba(255, 255, 255, 1);
    }
}

.tile.matched {
    animation: matchedAnimation 0.8s ease forwards;
    pointer-events: none;
}

@keyframes matchedAnimation {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
    100% { transform: scale(0); opacity: 0; visibility: hidden; }
}

/* Center Panel */
.center-panel {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFDE7 100%);
    border-radius: 18px;
    padding: 15px;
    box-shadow: 0 8px 32px rgba(255, 193, 7, 0.15);
    border: 3px solid #FFF9C4;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    position: relative;
}

.center-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #FFD700, #FFEE58);
    border-radius: 18px 18px 0 0;
}

/* Timer */
.timer-container {
    text-align: center;
    margin: 6px 0;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 6px 20px rgba(31, 38, 135, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timer-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.1) 0%, 
            transparent 50%, 
            rgba(255, 255, 255, 0.1) 100%);
    z-index: 1;
}

.timer-title {
    color: #2C3E50;
    font-size: 0.8rem;
    margin-bottom: 6px;
    font-weight: 600;
    position: relative;
    z-index: 2;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.timer {
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    font-weight: bold;
    color: #2C3E50;
    font-family: 'Courier New', monospace;
    position: relative;
    z-index: 2;
    text-shadow: 
        1px 1px 3px rgba(255, 255, 255, 0.8),
        0 0 6px rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.3);
    padding: 6px 12px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Score */
.score-container {
    text-align: center;
    margin: 8px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    border: 2px solid;
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.score-container:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 25px rgba(0, 0, 0, 0.15),
        0 6px 15px rgba(0, 0, 0, 0.08);
}

/* Pemain 1 Score */
.center-panel .score-container:nth-child(2) {
    border-color: #FF6B6B;
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
}

.center-panel .score-container:nth-child(2) .score-title {
    color: #FF6B6B;
    background: rgba(255, 107, 107, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.center-panel .score-container:nth-child(2) .score {
    color: #FF6B6B;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    font-weight: bold;
}

/* Pemain 2 Score */
.center-panel .score-container:nth-child(3) {
    border-color: #4ECDC4;
    background: linear-gradient(135deg, #ffffff 0%, #f0fffe 100%);
}

.center-panel .score-container:nth-child(3) .score-title {
    color: #4ECDC4;
    background: rgba(78, 205, 196, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.center-panel .score-container:nth-child(3) .score {
    color: #4ECDC4;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    font-weight: bold;
}

/* Animation untuk score update */
@keyframes scoreUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.score-update {
    animation: scoreUpdate 0.5s ease;
}

/* Footer */
footer {
    text-align: center;
    padding: 12px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 2px solid #E0E0E0;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.footer-left, .footer-right {
    display: flex;
    gap: 15px;
}

footer a, .menu-btn {
    color: #667eea;
    text-decoration: none;
    font-weight: bold;
    font-size: clamp(0.9rem, 2vw, 1rem);
    transition: all 0.3s ease;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    border: none;
    cursor: pointer;
}

footer a:hover, .menu-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
}

/* Confetti Effect */
.confetti {
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #f00;
    opacity: 0;
    z-index: 1000;
    animation: confetti-fall 3s linear forwards;
}

@keyframes confetti-fall {
    0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ============================================== */
/* === STYLING POPUP PEMENANG === */
/* ============================================== */
.winner-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    backdrop-filter: blur(5px);
}

.winner-popup.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.winner-content {
    background: linear-gradient(145deg, #FFD700, #FFA500);
    color: #4B0082;
    padding: 40px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(255, 165, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.6);
    transform: scale(0.8);
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border: 5px solid #FFFFFF;
}

.winner-popup.active .winner-content {
    transform: scale(1);
}

.winner-title {
    font-size: 2.5em;
    font-weight: 900;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 
        0 0 5px #FF69B4,
        0 0 10px #FFD700,
        0 0 15px #FF1493,
        0 0 20px #FFD700;
}

.winner-message {
    font-size: 3.5em;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #FFFFFF;
    text-shadow: 
        0 0 5px #FF69B4,
        0 0 10px #FFD700,
        0 0 15px #FF1493,
        0 0 20px #FFD700;
}

.winner-scores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 30px auto;
    padding: 10px 0;
    border: none;
    position: relative;
}

.winner-scores::after {
    content: 'VS'; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    font-weight: bold;
    color: #FF69B4;
    text-shadow: 0 0 5px #FFFFFF;
    background-color: rgba(0, 0, 0, 0.1); 
    padding: 5px 10px;
    border-radius: 10px;
    z-index: 10;
    pointer-events: none;
}

.player-score {
    background: #FFFFFF;
    padding: 20px 30px;
    border-radius: 15px;
    min-width: 150px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 15px #FFD700;
    border: 3px solid #FFA500;
    color: #4B0082;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    transition: transform 0.3s ease;
    z-index: 1;
}

.player-score:hover {
    transform: translateY(-5px) scale(1.05);
}

.player-score-value {
    font-size: 3.5em;
    font-weight: 900;
    background: linear-gradient(45deg, #FF69B4, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    line-height: 1;
}

.popup-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn {
    padding: 12px 25px;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
}

.primary-btn {
    background-color: #32CD32;
    color: white;
    border: 2px solid #228B22;
}

.primary-btn:hover {
    background-color: #4CAF50;
}

.secondary-btn {
    background-color: #6495ED;
    color: white;
    border: 2px solid #4169E1;
}

.secondary-btn:hover {
    background-color: #7B68EE;
}

.btn i {
    margin-right: 8px;
}

/* Sound Controls */
.sound-controls {
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 100;
}

.sound-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    color: white;
    font-size: 1.1rem;
}

.sound-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
}

/* ============================================== */
/* === SINGLE PLAYER LAYOUT - PERBAIKAN UTAMA === */
/* ============================================== */

/* Single Player Mode */
.container.single-player .game-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.container.single-player .player-panel.player2 {
    display: none !important;
}

.container.single-player .player-panel .player-title {
    display: none !important;
}

.container.single-player .player-panel.player1 {
    width: 100%;
    flex: 1;
    min-height: 400px;
}

.container.single-player .center-panel {
    display: none !important;
}

.container.single-player .player-grid {
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.container.single-player .tile.with-icon {
    font-size: clamp(2.2rem, 5vw, 3rem) !important; /* EXTRA BESAR */
    gap: 10px;
}

.container.single-player .tile-label {
    font-size: clamp(0.8rem, 1.8vw, 1.1rem) !important;
    font-weight: bold;
}

/* Single Player Header */
.player-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.player-header .player-title {
    font-size: 1.4rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: white;
    
}

.player-stats {
    display: flex;
    gap: 20px;
    align-items: center;
}

.player-timer,
.player-score {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 1.5rem;
    font-weight: bold;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    /* WARNA EMAS */
    color: #FFD700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    justify-content: center; /* Rata tengah */
    text-align: center;
}

/* Efek tambahan untuk score emas */
.container.single-player .player-score i {
    color: #FFD700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}

/* Animasi subtle untuk score */
.container.single-player .player-score {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 255, 255, 0.2));
    border: 2px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.player-timer i,
.player-score i {
    font-size: 1rem;
}

/* Mode Selection */
.mode-selection {
    margin-bottom: 25px;
}

.mode-options {
    display: flex;
    gap: 15px;
    justify-content: center;
    padding: 15px;
    border-radius: 15px;
    background-color: #f0f8ff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mode-btn {
    flex: 1;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 12px;
    border: 3px solid;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 200px;
}

.mode-btn i {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.mode-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.mode-btn.active {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 8px 25px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.8);
}

.mode-btn[data-mode="multiplayer"] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: #667eea;
    color: white;
}

.mode-btn[data-mode="singleplayer"] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FFA500;
    color: white;
}

/* Modal Pilihan Mode */
.mode-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

.mode-selection-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.mode-selection-modal .modal-content {
    background: linear-gradient(135deg, #FFFFFF 0%, #E3F2FD 100%);
    padding: 30px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border: 4px solid #667eea;
    max-width: 500px;
    width: 100%;
    backdrop-filter: blur(10px);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.mode-selection-modal.active .modal-content {
    transform: scale(1);
}

.modal-header {
    margin-bottom: 25px;
}

.modal-header h3 {
    font-size: 1.8rem;
    color: #0077b6;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.modal-header p {
    color: #37474F;
    font-size: 1rem;
}

.mode-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.mode-option-btn {
    display: flex;
    align-items: center;
    padding: 20px;
    border: 3px solid;
    border-radius: 15px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    width: 100%;
}

.mode-option-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.mode-option-btn[data-mode="singleplayer"] {
    border-color: #FFA500;
    background: linear-gradient(135deg, #FFF3E0, #FFFFFF);
}

.mode-option-btn[data-mode="multiplayer"] {
    border-color: #667eea;
    background: linear-gradient(135deg, #E3F2FD, #FFFFFF);
}

.mode-option-btn[data-mode="singleplayer"]:hover {
    border-color: #FF8C00;
    background: linear-gradient(135deg, #FFE0B2, #FFFFFF);
}

.mode-option-btn[data-mode="multiplayer"]:hover {
    border-color: #5a6fd8;
    background: linear-gradient(135deg, #BBDEFB, #FFFFFF);
}

.mode-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.mode-option-btn[data-mode="singleplayer"] .mode-icon {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: white;
}

.mode-option-btn[data-mode="multiplayer"] .mode-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.mode-info {
    flex: 1;
}

.mode-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.mode-desc {
    font-size: 0.9rem;
    color: #666;
}

.modal-actions {
    display: flex;
    justify-content: center;
}

/* =============================== */
/* RESPONSIVE DESIGN - PERBAIKAN */
/* =============================== */

@media (max-width: 1200px) {
    .center-panel {
        width: 160px;
    }
}

@media (max-width: 992px) {
    .game-area {
        flex-direction: column;
        height: auto;
        gap: 10px;
    }
    
    .center-panel {
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
        order: -1;
        margin-bottom: 10px;
        padding: 10px;
    }
    
    /* MULTIPLAYER - Grid lebih sedikit untuk mobile */
    .player-grid {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 6px;
        padding: 4px;
	flex: 1;
    	min-height: 0;
    }
    
    /* SINGLE PLAYER - Grid lebih sedikit untuk mobile */
    .container.single-player .player-grid {
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 6px;
    }
    
    .timer-container,
    .score-container {
        min-height: 50px;
        padding: 8px;
    }
    
    .timer {
        font-size: 1.2rem;
    }
    
    .score {
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    .container {
        height: auto;
        min-height: 95vh;
        padding: 5px;
        gap: 10px;
    }
    
    /* MULTIPLAYER - Grid lebih sedikit untuk tablet kecil */
    .player-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(10, 1fr);
        gap: 5px;
    }
    
    /* SINGLE PLAYER - Grid lebih sedikit untuk tablet kecil */
    .container.single-player .player-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(8, 1fr);
        gap: 5px;
    }
    
    .center-panel {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }
    
    .player-header {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 10px 15px;
    }
    
    .player-stats {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Perbaikan ukuran tile untuk mobile */
    .tile {
        border-radius: 8px;
        font-size: 0.9rem;
    }
    
    .tile-icon {
        font-size: min(2.5rem, 8vw) !important;
    }
    
    .tile-label {
        font-size: min(0.8rem, 3vw) !important;
    }
    
    .menu-content {
        padding: 20px;
        max-width: 90vw;
    }
    
    .theme-options {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 15px;
    }
    
    .theme-btn {
        height: 70px;
    }
}

@media (max-width: 576px) {
    .player-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(10, 1fr);
        gap: 4px;
        padding: 3px;
    }
    
    .container.single-player .player-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(10, 1fr);
        gap: 4px;
    }
    
    .center-panel .timer-container,
    .center-panel .score-container {
        margin: 4px 0;
        min-height: 50px;
        padding: 6px;
    }
    
    .player-header {
        padding: 8px 12px;
    }
    
    .player-timer,
    .player-score {
        padding: 5px 10px;
        font-size: 0.9rem;
    }
    
    .timer {
        font-size: 1.1rem;
    }
    
    .score {
        font-size: 1.3rem;
    }
    
    footer {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    
    .footer-left, .footer-right {
        gap: 10px;
    }
    
    .winner-content {
        padding: 20px;
        margin: 10px;
    }
    
    .winner-scores {
        flex-direction: column;
        gap: 20px;
    }
    
    .winner-scores::after {
        content: '';
        display: none;
    }
}

@media (max-width: 480px) {
    .player-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(15, 1fr);
        gap: 3px;
    }
    
    .container.single-player .player-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(12, 1fr);
        gap: 3px;
    }
    
    .tile-icon {
        font-size: min(2rem, 7vw) !important;
    }
    
    .tile-label {
        font-size: min(0.7rem, 2.5vw) !important;
    }
    
    .menu-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }
    
    .menu-subtitle {
        font-size: clamp(0.8rem, 3vw, 1rem);
    }
}

/* ============================================== */
/* === 20 VARIASI WARNA KARTU === */
/* ============================================== */

/* 1. Varian Hijau Cerah */
.tile.card-variant-1 {
    background: linear-gradient(135deg, #A8E6CF, #DFFFDF); 
    color: #00796B; border: 3px solid #66BB6A;
    box-shadow: 0 6px 0 #66BB6A, 0 0 15px #C5E1A5;
}
.tile.card-variant-1:hover { box-shadow: 0 4px 0 #66BB6A, 0 0 20px #81C784; }

/* 2. Varian Biru Laut */
.tile.card-variant-2 {
    background: linear-gradient(135deg, #BBDEFB, #E3F2FD); 
    color: #1565C0; border: 3px solid #42A5F5;
    box-shadow: 0 6px 0 #42A5F5, 0 0 15px #90CAF9;
}
.tile.card-variant-2:hover { box-shadow: 0 4px 0 #42A5F5, 0 0 20px #64B5F6; }

/* 3. Varian Ungu Magenta */
.tile.card-variant-3 {
    background: linear-gradient(135deg, #E1BEE7, #F3E5F5); 
    color: #6A1B9A; border: 3px solid #AB47BC;
    box-shadow: 0 6px 0 #AB47BC, 0 0 15px #CE93D8;
}
.tile.card-variant-3:hover { box-shadow: 0 4px 0 #AB47BC, 0 0 20px #BA68C8; }

/* 4. Varian Oranye Hangat */
.tile.card-variant-4 {
    background: linear-gradient(135deg, #FFCC80, #FFE0B2); 
    color: #E65100; border: 3px solid #FFA726;
    box-shadow: 0 6px 0 #FFA726, 0 0 15px #FFB74D;
}
.tile.card-variant-4:hover { box-shadow: 0 4px 0 #FFA726, 0 0 20px #FFB74D; }

/* 5. Varian Merah Muda Cerah */
.tile.card-variant-5 {
    background: linear-gradient(135deg, #F8BBD0, #FFEBEE); 
    color: #C2185B; border: 3px solid #F06292;
    box-shadow: 0 6px 0 #F06292, 0 0 15px #F48FB1;
}
.tile.card-variant-5:hover { box-shadow: 0 4px 0 #F06292, 0 0 20px #F48FB1; }

/* 6. Varian Toska (Teal) */
.tile.card-variant-6 {
    background: linear-gradient(135deg, #B2EBF2, #E0F7FA); 
    color: #00838F; border: 3px solid #26C6DA;
    box-shadow: 0 6px 0 #26C6DA, 0 0 15px #80DEEA;
}
.tile.card-variant-6:hover { box-shadow: 0 4px 0 #26C6DA, 0 0 20px #4DD0E1; }

/* 7. Varian Kuning Lemon */
.tile.card-variant-7 {
    background: linear-gradient(135deg, #FFF9C4, #FFFDE7); 
    color: #FBC02D; border: 3px solid #FFEE58;
    box-shadow: 0 6px 0 #FFEE58, 0 0 15px #FFF59D;
}
.tile.card-variant-7:hover { box-shadow: 0 4px 0 #FFEE58, 0 0 20px #FFEA00; }

/* 8. Varian Abu-abu Dingin */
.tile.card-variant-8 {
    background: linear-gradient(135deg, #CFD8DC, #ECEFF1); 
    color: #455A64; border: 3px solid #90A4AE;
    box-shadow: 0 6px 0 #90A4AE, 0 0 15px #B0BEC5;
}
.tile.card-variant-8:hover { box-shadow: 0 4px 0 #90A4AE, 0 0 20px #AAB5BA; }

/* 9. Varian Hijau Mint */
.tile.card-variant-9 {
    background: linear-gradient(135deg, #B9FBC0, #D0FFC0); 
    color: #1B5E20; border: 3px solid #4CAF50;
    box-shadow: 0 6px 0 #4CAF50, 0 0 15px #A5D6A7;
}
.tile.card-variant-9:hover { box-shadow: 0 4px 0 #4CAF50, 0 0 20px #81C784; }

/* 10. Varian Indigo Pastel */
.tile.card-variant-10 {
    background: linear-gradient(135deg, #C5CAE9, #E8EAF6); 
    color: #303F9F; border: 3px solid #7986CB;
    box-shadow: 0 6px 0 #7986CB, 0 0 15px #9FA8DA;
}
.tile.card-variant-10:hover { box-shadow: 0 4px 0 #7986CB, 0 0 20px #9FA8DA; }

/* 11. Varian Emas Cerah */
.tile.card-variant-11 {
    background: linear-gradient(135deg, #FFEB3B, #FFF59D); 
    color: #FF8F00; border: 3px solid #FFC107;
    box-shadow: 0 6px 0 #FFC107, 0 0 15px #FFE082;
}
.tile.card-variant-11:hover { box-shadow: 0 4px 0 #FFC107, 0 0 20px #FFCA28; }

/* 12. Varian Violet Listrik */
.tile.card-variant-12 {
    background: linear-gradient(135deg, #E6A9FF, #F4D3FF); 
    color: #7B1FA2; border: 3px solid #D500F9;
    box-shadow: 0 6px 0 #D500F9, 0 0 15px #EA80FC;
}
.tile.card-variant-12:hover { box-shadow: 0 4px 0 #D500F9, 0 0 20px #C700FF; }

/* 13. Varian Hijau Zaitun */
.tile.card-variant-13 {
    background: linear-gradient(135deg, #DCE775, #F0F4C3); 
    color: #689F38; border: 3px solid #AEEA00;
    box-shadow: 0 6px 0 #AEEA00, 0 0 15px #C6FF00;
}
.tile.card-variant-13:hover { box-shadow: 0 4px 0 #AEEA00, 0 0 20px #B2FF59; }

/* 14. Varian Cokelat Hangat */
.tile.card-variant-14 {
    background: linear-gradient(135deg, #D7CCC8, #EDE7F6); 
    color: #6D4C41; border: 3px solid #A1887F;
    box-shadow: 0 6px 0 #A1887F, 0 0 15px #BCAAA4;
}
.tile.card-variant-14:hover { box-shadow: 0 4px 0 #A1887F, 0 0 20px #A98C7F; }

/* 15. Varian Cyan Pucat */
.tile.card-variant-15 {
    background: linear-gradient(135deg, #80DEEA, #E0F7FA); 
    color: #0097A7; border: 3px solid #4DD0E1;
    box-shadow: 0 6px 0 #4DD0E1, 0 0 15px #84FFFF;
}
.tile.card-variant-15:hover { box-shadow: 0 4px 0 #4DD0E1, 0 0 20px #4DD0E1; }

/* 16. Varian Merah Bata */
.tile.card-variant-16 {
    background: linear-gradient(135deg, #FFCDD2, #FFEBEE); 
    color: #D32F2F; border: 3px solid #EF5350;
    box-shadow: 0 6px 0 #EF5350, 0 0 15px #FFCDD2;
}
.tile.card-variant-16:hover { box-shadow: 0 4px 0 #EF5350, 0 0 20px #FF8A80; }

/* 17. Varian Hijau Limau */
.tile.card-variant-17 {
    background: linear-gradient(135deg, #F0F4C3, #F9FBE7); 
    color: #AFB42B; border: 3px solid #C0CA33;
    box-shadow: 0 6px 0 #C0CA33, 0 0 15px #E6EE9C;
}
.tile.card-variant-17:hover { box-shadow: 0 4px 0 #C0CA33, 0 0 20px #DCE775; }

/* 18. Varian Biru Navy Tua */
.tile.card-variant-18 {
    background: linear-gradient(135deg, #BBDEFB, #E3F2FD); 
    color: #1A237E; border: 3px solid #5C6BC0;
    box-shadow: 0 6px 0 #5C6BC0, 0 0 15px #9FA8DA;
}
.tile.card-variant-18:hover { box-shadow: 0 4px 0 #5C6BC0, 0 0 20px #90CAF9; }

/* 19. Varian Peach Lembut */
.tile.card-variant-19 {
    background: linear-gradient(135deg, #FFCCBC, #FFEBEE); 
    color: #FF7043; border: 3px solid #FF8A65;
    box-shadow: 0 6px 0 #FF8A65, 0 0 15px #FFAB91;
}
.tile.card-variant-19:hover { box-shadow: 0 4px 0 #FF8A65, 0 0 20px #FF9E80; }

/* 20. Varian Biru Langit */
.tile.card-variant-20 {
    background: linear-gradient(135deg, #B3E5FC, #E1F5FE); 
    color: #0288D1; border: 3px solid #4FC3F7;
    box-shadow: 0 6px 0 #4FC3F7, 0 0 15px #81D4FA;
}
.tile.card-variant-20:hover { box-shadow: 0 4px 0 #4FC3F7, 0 0 20px #4FC3F7; }

/* Untuk menyembunyikan kartu yang cocok */
.tile.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

/* Logo Bimbel Brilian */
#player1-grid, #player2-grid {
    position: relative; 
    overflow: hidden;
    background-color: #f7f7f7;
}

#player1-grid::before, #player2-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('logo_bimbelbrilian.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    opacity: 0.1; 
    z-index: 0;
    pointer-events: none;
}

.tile {
    position: relative;
    font-size: 16px;
    z-index: 1;
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
    .tile-icon {
        font-size: min(3.5rem, 9vw) !important;
    }
    
    .tile-label {
        font-size: min(1rem, 3.5vw) !important;
    }
}

@media (max-width: 480px) {
    .tile-icon {
        font-size: min(3rem, 8vw) !important;
    }
    
    .tile-label {
        font-size: min(0.9rem, 3vw) !important;
    }
}