body { 
    font-family: 'Cinzel', serif; 
    background-color: #1a1a1a;
    background-size: cover; 
    color: #d1b894;
    margin: 0; 
    padding: 0;
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ember-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

h1, h2, h3 { 
    text-shadow: 1px 1px 2px #000; 
}

button, select, input {
    font-family: 'Cinzel', serif;
    background: #111111;
    color: #d1b894;
    border: 2px solid #4a2f1e;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    text-shadow: 1px 1px 2px #000;
}

button:hover, select:hover {
    background: #111111;
}

/* Card Styles */
.cell, .card, .selection-card, .selected-card, .auction-card, #card-display, .store-card { 
    border: 3px solid #4a2f1e; 
    position: relative; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    transition: transform 0.2s, box-shadow 0.2s;
    background: linear-gradient(180deg, #d4c9a8 0%, #b89f7b 100%);
}

.cell {
    width: 100px;
    height: 140px;
    box-sizing: border-box;
}

.card {
    width: 80px;
    height: 120px;
}

.cell:hover, .card:hover, .selection-card:hover, .selected-card:hover, .auction-card:hover, .store-card:hover {
    box-shadow: 0 0 10px #111111;
    transform: perspective(500px) rotateX(5deg) rotateY(5deg);
}

.cell.red, .card.red, .selected-card { 
    background: linear-gradient(180deg, #d4a8a8 0%, #111111 100%);
}

.cell.blue, .card.blue { 
    background: linear-gradient(180deg, #a8c3d4 0%, #7b9fb8 100%);
}

.card.blue:hover { box-shadow: 0 0 10px #7b9fb8; }
.card.used { opacity: 0.5; cursor: not-allowed; }

.north { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); color: #b22222; }
.east { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: #b22222; }
.south { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); color: #b22222; }
.west { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); color: #b22222; }
.name { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #d1b894; }

.art { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    opacity: 0.3; 
    z-index: 0; 
}

.north, .east, .south, .west, .name { z-index: 1; }

/* Rarity Styles */
.rarity-common { border-color: #808080 !important; }
.rarity-rare { border-color: #1e90ff !important; }
.rarity-epic { border-color: #800080 !important; }
.rarity-legendary { border-color: #ffd700 !important; box-shadow: 0 0 10px #ffd700; }

.cell .rarity-icon, .card .rarity-icon, .selection-card .rarity-icon, .selected-card .rarity-icon, .auction-card .rarity-icon, #card-display .rarity-icon, .store-card .rarity-icon { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
    font-size: 12px; 
    color: #ffd700; 
    z-index: 1; 
}

#card-display .rarity-icon { 
    top: 10px; 
    right: 10px; 
    font-size: 16px; 
}

.selected-card .rarity-icon, .auction-card .rarity-icon, .store-card .rarity-icon { 
    top: 3px; 
    right: 3px; 
    font-size: 10px; 
}

/* Sidebar Styles */
#sidebar {
    width: 170px;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            background: #000000;
            padding: 0; /* Remove padding to prevent skewing */
            z-index: 1000;
            display: flex;
            flex-direction: column;
}

#sidebar-menu {
    display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            padding: 20px 10px; /* Add padding to menu */
            box-sizing: border-box;
}

#sidebar-menu a {
    color: #d1b894;
            text-decoration: none;
            padding: 10px; /* Consistent padding for menu items */
            font-size: 16px;
            border-left: 3px solid transparent;
            transition: all 0.1s;
            width: 100%;
            box-sizing: border-box;
            text-align: left;
}

#sidebar-menu a:hover {
    background-color: #111111;
            border-left: 3px solid #d1b894;
}

/* Main Content Wrapper for Centering */
.main-content {
    margin-left: 170px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}