:root {
    --drm-contour-couleur: #ffffff; 
    --drm-contour-taille: 4px;      
    --drm-sol-impair: #E6D8AD; 
    --drm-sol-pair:   #B59E75; 
    --drm-vide:       transparent;
    --drm-obstacle-top: #6d6349;   
    --drm-obstacle-face-l: #4e4530; 
    --drm-obstacle-face-r: #5c523d; 
    --drm-start-red:  #D86554;
    --drm-start-blue: #77B5B5;
}

.drm-map-container {
    width: fit-content; height: auto;
    padding: 30px; margin: 20px auto;
    display: table;
    background-color: #2b2b2b;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.dungeon-map-sticker {
    width: fit-content; height: auto; padding: 0;
    filter: 
        drop-shadow(var(--drm-contour-taille) 0 0 var(--drm-contour-couleur)) 
        drop-shadow(calc(var(--drm-contour-taille) * -1) 0 0 var(--drm-contour-couleur)) 
        drop-shadow(0 var(--drm-contour-taille) 0 var(--drm-contour-couleur)) 
        drop-shadow(0 calc(var(--drm-contour-taille) * -1) 0 var(--drm-contour-couleur));
}

.map-row { white-space: nowrap; height: 61px; }
.map-row:not(:first-child) { margin-top: -46px; }
.map-row:nth-child(even) { margin-left: 29.5px; }

.cell {
    -webkit-clip-path: polygon(50% 20%, 100% 50%, 50% 80%, 0 50%);
    clip-path: polygon(50% 20%, 100% 50%, 50% 80%, 0 50%);
    height: 50px; width: 59px;
    position: relative; display: inline-block; margin: 0;
    transform: scale(1.02);
}

.map-row:nth-child(odd) > .cell { background-color: var(--drm-sol-impair); }
.map-row:nth-child(even) > .cell { background-color: var(--drm-sol-pair); }
.cell.void { background-color: transparent !important; pointer-events: none; transform:none; }

/* OBSTACLE */
.cell.obstacle {
    background-color: transparent !important;
    clip-path: none !important; -webkit-clip-path: none !important;
    z-index: 10;
    overflow: visible;
    transform: none;
}
.cell.obstacle::before {
    content: ''; position: absolute;
    width: 59px; height: 50px;
    top: -12px; left: 0; z-index: 2;
    background-color: var(--drm-obstacle-top);
    clip-path: polygon(50% 20%, 100% 50%, 50% 80%, 0 50%);
    transform: scale(1.02);
}
.cell.obstacle::after {
    content: ''; position: absolute;
    width: 59px; height: 62px;
    top: -12px; left: 0; z-index: 1;
    clip-path: polygon(0% 40%, 50% 64.5%, 100% 40%, 100% 60%, 50% 84%, 0% 60%);
    background: linear-gradient(to right, var(--drm-obstacle-face-l) 50%, var(--drm-obstacle-face-r) 50%);
    transform: scale(1.02);
}

.cell.red::after, .cell.blue::after {
    content: ''; clip-path: polygon(50% 20%, 100% 50%, 50% 80%, 0 50%);
    height: 34px; width: 42px; top: 8px; left: 8px; position: absolute; z-index: 15;
}
.cell.red::after { background-color: var(--drm-start-red); }
.cell.blue::after { background-color: var(--drm-start-blue); }

.cell:hover { filter: brightness(1.2); z-index: 20; }