/* 2048 Match Styles - 3D Update */
:root {
    --bg-color: #008744; /* Green board */
    --board-bg: rgba(0,0,0,0.2);
    --cell-bg: rgba(0,0,0,0.1);
    --text-color: #fff;
    --shadow-alpha: 0.2;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Fredoka One', cursive; /* Rounded font matching image */
    background-color: var(--bg-color);
    color: white;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
}

.home-btn {
    position: absolute;
    top: 20px; left: 20px;
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    background: rgba(0,0,0,0.2);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
}

.game-container {
    width: 100%;
    max-width: 500px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

/* Header Score */
.header {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}
.score-box {
    background: #005f30;
    padding: 8px 20px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    box-shadow: 0 4px 0 #004d26;
    min-width: 120px;
    justify-content: center;
}
.score-box i { color: #FFD700; } /* Gold icon */

/* Board */
.board-wrapper {
    background: rgba(255,255,255,0.15); /* Glassy border container */
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 6px;
    background: #006030; /* Darker green checkerboard base */
    padding: 6px;
    border-radius: 8px;
    width: 320px;
    height: 320px;
    position: relative;
    /* Create checkerboard pattern via CSS gradients or just cells? */
    /* Let's keep it simple cells first, usually checkerboard is purely visual on bg */
}

/* Checkerboard Cell styling */
.cell {
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.cell:nth-child(odd) { background: rgba(0,0,0,0.05); }
.cell:nth-child(even) { background: rgba(0,0,0,0.1); }

/* 3D Block Styling */
.block {
    width: 90%;
    height: 90%;
    border-radius: 12px; /* Rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    position: relative;
    z-index: 2;
    transition: transform 0.1s, top 0.1s;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    /* 3D Bevel Effect using Box Shadow */
    box-shadow: 
        inset 0 4px 0 rgba(255,255,255,0.3), /* Highlight top */
        0 6px 0 rgba(0,0,0,0.25); /* Shadow bottom aka Depth */
    margin-top: -6px; /* Offset to account for shadow depth */
    cursor: pointer; /* Indicate interactions */
}

.block.selected {
    outline: 4px solid #fff;
    transform: scale(1.1);
    z-index: 10;
}

.block.dragging {
    opacity: 0.8;
    transform: scale(1.1);
    z-index: 100;
}

.cell.valid-drop {
    box-shadow: inset 0 0 15px #4CAF50;
    transition: box-shadow 0.1s;
}

/* Specific Block Colors with Auto Shadows */
/* We use bg-color and let the box-shadow handle the 3D look */
.val-2 { background-color: #E040FB; } /* Purple/Pink */
.val-4 { background-color: #29B6F6; } /* Blue */
.val-8 { background-color: #42A5F5; } /* Darker Blue */
.val-16 { background-color: #AB47BC; } /* Purple */
.val-32 { background-color: #FF7043; } /* Orange */
.val-64 { background-color: #EF5350; } /* Red */
.val-128 { background-color: #FFCA28; } /* Yellow */
.val-256 { background-color: #D4E157; color: #333; }

/* The Dock */
.dock-container {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    height: 90px;
}

/* Dock circling effect */
.dock-slot {
    width: 55px; height: 55px;
    background: rgba(0,0,0,0.2);
    border-radius: 50%; /* Circular slots as in screenshot */
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

.dock-slot .block {
    width: 80%; height: 80%;
    font-size: 1.2rem;
    box-shadow: 
        inset 0 2px 0 rgba(255,255,255,0.3), 
        0 4px 0 rgba(0,0,0,0.25);
    margin-top: -4px;
}

/* Powerups */
.powerups {
    display: flex;
    gap: 40px;
    margin-top: 30px;
}

.p-btn {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.p-btn-bg {
    width: 60px; height: 60px;
    background: #FFB300;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 0 #F57F17, 0 8px 10px rgba(0,0,0,0.2);
    margin-bottom: 5px;
    border: 2px solid #FFD54F;
}
.p-btn:active .p-btn-bg {
    transform: translateY(5px);
    box-shadow: 0 0 0 #F57F17;
}

.p-btn-bg i {
    font-size: 1.8rem;
    color: white;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.2));
}

.p-label {
    background: #333;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    display: flex; align-items: center; gap: 5px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.p-label i { color: #FFD700; }

#btn-bomb .p-btn-bg { background: #E53935; border-color: #EF5350; box-shadow: 0 5px 0 #C62828; }
#btn-swap .p-btn-bg { background: #43A047; border-color: #66BB6A; box-shadow: 0 5px 0 #2E7D32; }

/* Modal */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}
.modal-content {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    width: 80%;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-content h2 { color: #333; margin-top: 0; }
.btn-control {
    background: #4ecca3;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 1.2rem;
    border-radius: 30px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: 0 5px 0 #3db38b;
    font-family: inherit;
}
.btn-control:active { transform: translateY(5px); box-shadow: none; }

@keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes mergePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
/* Toast Notification */
.game-toast {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1.2rem;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s, transform 0.4s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    text-align: center;
    border: 2px solid #FFD700;
}
.game-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Roadmap Goal Display */
.goal-display {
    background: #004d26;
    padding: 8px 15px;
    border-radius: 20px;
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
}
.goal-display span { opacity: 0.8; font-size: 0.9rem; }
.goal-display strong { color: #FFD700; font-size: 1.3rem; }