body {
color:#5e5e5e;
margin: 0;
padding: 20px;
font-size:24px;
filter: grayscale(10%) sepia(30%) hue-rotate(40deg);
background: #000 ;

}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #044c64;  
}
::-webkit-scrollbar-thumb {
background: #8A6D1D; 
}
::-webkit-scrollbar-thumb:hover {
background: #88D16; 
}
html{
cursor: url("/graphics/cursors/wolf-skull-cursor.png"), auto;
}
a {
cursor: url("/graphics/cursors/lantern_cursor.png"), auto;
}

p {
color:white;
animation:none;
}

a:link {
color: white;
text-decoration-color: #37992D;  
animation: textShadow 1.6s infinite;
}            
a:visited {
color: #D0D6C1;
text-decoration-color: #37992D;
}

/* begin */

.altar-builder {
width:1482px;
margin: 0 auto;
}

h1 {
text-align: center;
margin-bottom: 8px;
}

.instructions {
text-align: center;
margin-bottom: 20px;
}

/* altar surface*/

#altar {
position: relative;
width: 100%;
height: 800px;

background: #000;

border-width: 2px;
border-style: ridge;
border-color: #2A7021;

overflow: hidden;
touch-action: none;
}

/* items-placed */

.altar-item {
position: absolute;

max-width: none;
max-height: 300px;

object-fit: contain;

cursor: url("/graphics/cursors/handmouse.png"), auto;
user-select: none;
-webkit-user-drag: none;

touch-action: none;

z-index: 10;
}

.altar-item:active {
cursor: url("/graphics/cursors/handmouse.png"), auto;
}

/* item picking tray */

.tray-wrapper {
margin-top: 20px;
justify-items: center;
}

.tray-title {
margin-bottom: 10px;
}

#item-tray {
display: flex;
flex-wrap: wrap;
padding: 15px;
border-width: 2px;
border-style: ridge;
border-color: #2A7021;
background-image:url(/graphics/brick.jpg);
width: 1482px;
}
.tray-item {
width: 100px;
height: 100px;
background: #000000;
border-width: 2px;
border-style: ridge;
border-color: #2A7021;
cursor: url(/graphics/cursors/handmouse.png), auto;
display: flex;
align-items: center;
justify-content: center;
touch-action: none;
user-select: none;
margin: 5px;
}

.tray-item:hover {
background: #0e0e0e;
}

.tray-item:active {
cursor: url("/graphics/cursors/handmouse.png"), auto;
}

/* set image as icon     */

.tray-item img {
width: 100%;
height: 100%;

object-fit: contain;

pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}

/*controls */

.controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
justify-content: center;
}

button {
background:#BE6A6A;
height:auto;
font-size:12px;
padding:7px;
text-align:center;
font-weight:600;
color:#000000;
border-width: 2px;
border-style: ridge;
border-color: #2A7021;

font-family: inherit;

cursor: url("/graphics/cursors/eyemouse.png"), auto;
}

button:hover {
background: #c98383;
}

/* mobile-testing*/

@media (max-width: 600px) {
body {
  padding: 10px;
}

#altar {
  height: 450px;
}

.altar-item {
  width: 80px;
  height: 80px;
  cursor: url("/graphics/cursors/handmouse.png"), pointer;
}

.tray-item {
  width: 75px;
  height: 75px;
}
}

/* temp tools */
.transform-match,
.tool-drag-ghost {
position: fixed !important;
pointer-events: none;
z-index: 99999;
cursor: url("/graphics/cursors/handmouse.png"), auto;
}



/* temporary match */

.transform-match {
height: auto;
}


/* visual feedback */

.transform-target {
filter:
drop-shadow(0 0 8px #ffcc33)
drop-shadow(0 0 16px #ff9900);
}


.reversal-target {
filter:
drop-shadow(0 0 8px #9ee7ff)
drop-shadow(0 0 16px #54b9ff);
}


.banish-active {
filter:
drop-shadow(0 0 8px #fff)
drop-shadow(0 0 16px #000);
}

.altar-tool {
z-index: 50000;
user-select: none;
cursor: url("/graphics/cursors/handmouse.png"), auto;
}

.altar-tool img {
user-select: none;
-webkit-user-drag: none;
}

.offering-active {
filter:
drop-shadow(0 0 8px #ff4444)
drop-shadow(0 0 16px #ff0000)
drop-shadow(0 0 24px #ff0000);
}