:root {
--item-slots-slot-color: #393b44;
--item-slots-slot-color-hover: #393b44;
--item-slots-slot-color-focus: #c6cada;
}
.item-slots {
position: absolute;
bottom: 0;
left: 0;
margin: 12px;
display: flex;
align-items: center;
justify-content: center;
z-index: 100000;
user-select: none;
}
.item-slots-slot {
display: flex;
align-items: center;
justify-content: center;
z-index: -1;
background: rgba(168, 168, 168, 0.05);
border-style: solid;
border-color: var(--item-slots-slot-color);
transition: 100ms ease-in-out;
}
.item-slots-slot-hover {
box-shadow: none;
background: rgba(168, 168, 168, 0.15);
border-color: var(--item-slots-slot-color-hover);
transform: scale(1.06);
}
.item-slots-slot-focus {
box-shadow: none;
background: rgba(168, 168, 168, 0.4);
border-color: var(--item-slots-slot-color-focus);
transform: scale(1.1);
}
.debug-data {
position: fixed;
top: 10px;
left: 10px;
color: #f0f0f0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
z-index: 100000;
display: flex;
flex-direction: column;
overflow: hidden;
gap: 6px;
min-width: 240px;
font-family: "Share Tech Mono", monospace;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.debug-entries {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
justify-content: flex-start;
gap: 2px;
}
.debug-line {
font-size: 12px;
line-height: 1.3;
margin: 0;
letter-spacing: 0.02em;
transition: opacity 0.15s ease;
}
.debug-label {
color: #aaa;
opacity: 0.8;
}
.debug-value {
color: #f0f0f0;
font-weight: 500;
}