body { overflow: hidden; background-color: #f5f5f5; }

.d-none { display:none !important; }

.h-35 {
    height: 35vh;
}

.w-35 {
    width: 35%;
}

/* Referred from https://css-loaders.com/spinner/ */
.loader {
  width: 10vh;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side, #808080 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, #808080);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 20%), #000 0);
  animation: l13 1s infinite linear;
}

@keyframes l13 { 
  100% {
    transform: rotate(1turn);
  }
}

.custom-col-15 { flex: 0 0 15%; max-width: 15%; }
.custom-col-425 { flex: 0 0 42.5%; max-width: 42.5%; }
.custom-col-40 { height: calc(100vh - 1vh); }

.tab {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-bottom: none;
    background-color: transparent;
    cursor: pointer;
    flex-grow: 1;
    text-align: center;
    transition: transform 0.1s, background-color 0.3s;
}

.tab:hover:not(.active) {
    background-color: #3C3C3C;
}

.tab.active {
    background-color: #3C3C3C;
}

.tab.clicked {
    transform: scale(0.95);
    background-color: #2A2A2A;
}

#inventoryItems {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1%;
  width: 95%;
  margin: 0 auto;
}



.inventory-slot {
  border: 2px dashed #888;
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  aspect-ratio: 1/1;
  width: 100%;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

@media (min-width: 1400px) and (max-width: 1599px) {
  .inventory-slot {
    flex: 0 1 auto;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1.1 / 1;
  }
}


@media (min-width: 1600px) {
  .inventory-slot {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


.inventory-slot.filled {
    border: 2px solid #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.inventory-slot:hover {
    border-color: #666;
    transform: scale(1.05);
    transition: border-color 0.2s, transform 0.2s;
}

.inventory-slot.active {
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.6);
    border-color: transparent;
    transition: box-shadow 0.5s ease, transform 0.2s;
}

.inventory-slot.clicked {
    transform: scale(1);
    transition: transform 0.2s ease;
}

#inventoryPagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#inventoryPagination button:hover:not(:disabled) {
    background-color: #444;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.info-button {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.info-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    background-color: #ffe5e5; /* Soft red-ish hover bg */
}

.info-button:active {
    transform: scale(0.95);
    background-color: #ffcccc;
}


#info-bubble {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

#info-bubble.show {
    opacity: 1;
    pointer-events: auto;
}

#search-bar:focus {
    border-color: transparent;
    box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.6);
    outline: none;
}

#canvasContainer {
  flex: 1 1 auto;
  min-height: 0;
}

#search-bar::placeholder {
  color: #ccc;
  opacity: 1;
}