.color-white {
    color: white;
}

.color-red {
    color: red;
}

.color-green {
    color: rgb(0, 255, 128);
}

.imgLogo {
    width: 75px;
    height: 75px;
    border-radius: 50%;
}

#location {
    font-size: 1.2em;
}

.btnPurchase {
    background-color: #ffa600;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 1em;
    cursor: pointer;
}

.ruby-chest {
    margin: auto;
    width: 100px;
    height: auto;
}

.wrapper-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1em;

}

.ruby-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.currency-panel-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
}

.currency-panel {
    background-color: #4c00ff;
    width: fit-content;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
    border-radius: 10px;
    margin-top: 1em;

}

h1 {
    color: white;
}

body {
    background: #13070e;
    overflow-x: hidden;
    max-width: 1000px;
    margin:0 auto;
}

.color-pink {
    color: pink;
}

.color-purple {
    color: #dca1ee;
}

.color-gold {
    color: gold;
}

.outer-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    display: flex;
    flex-wrap: wrap; 
}

.underlined {
    text-decoration: underline;
}

.item-common {
    color: rgb(192, 192, 192);
}

.item-uncommon {
    color: rgb(0, 221, 0);
}

.item-rare {
    color: rgb(0, 112, 221);
}
.item-epic {
    color: rgb(195, 0, 255);
}

.item-legendary {
    color: rgb(255, 196, 0);
}

.item-remarkable {
    color: rgb(255, 39, 39);
}

.item-Common {
    color: white;
}

.item-Uncommon {
    color: rgb(0, 221, 0);
}

.item-Rare {
    color: rgb(0, 112, 221);
}
.item-Epic {
    color: rgb(195, 0, 255);
}

.item-Legendary {
    color: rgb(255, 196, 0);
}

.item-Remarkable {
    color: rgb(255, 39, 39);
}

.item-common-counter {
    color: rgb(192, 192, 192);
    max-width: 110px;
    margin-left: 1em;
    margin-top: .5em;
    padding: 3px 7px;
    border-radius: 10px;
}

.item-uncommon-counter {
    color: rgb(0, 221, 0);
    max-width: 110px;
    margin-left: 1em;
    margin-top: .5em;
    padding: 3px 7px;
    border-radius: 10px;
}

.item-rare-counter {
    color: rgb(0, 112, 221);
    max-width: 110px;
    margin-left: 1em;
    margin-top: .5em;
    padding: 3px 7px;
    border-radius: 10px;
}

.item-epic-counter {
    color: rgb(195, 0, 255);
    max-width: 110px;
    margin-left: 1em;
    margin-top: .5em;
    padding: 3px 7px;
    border-radius: 10px;
}

.item-legendary-counter {
    color: rgb(255, 196, 0);
    max-width: 110px;
    margin-left: 1em;
    margin-top: .5em;
    padding: 3px 7px;
    border-radius: 10px;
}

.item-remarkable-counter {
    color: rgb(255, 39, 39);
    max-width: 110px;
    margin-left: 1em;
    margin-top: .5em;
    padding: 3px 7px;
    border-radius: 10px;
}

.item-common-counter:hover {
    text-decoration: underline;
    cursor: pointer;
}

.item-uncommon-counter:hover {
    text-decoration: underline;
    cursor: pointer;
}

.item-rare-counter:hover {
    text-decoration: underline;
    cursor: pointer;
}

.item-epic-counter:hover {
    text-decoration: underline;
    cursor: pointer;
}

.item-legendary-counter:hover {
    text-decoration: underline;
    cursor: pointer;
}

.item-remarkable-counter:hover {
    text-decoration: underline;
    cursor: pointer;
}

.login-form {
    background-color: #240f1b;
    padding: 30px;
    border-radius: 10px;
    max-width: fit-content;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

#searchHistory {
    background-color: #240f1b;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 5px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.item-list-history {
    padding: 0;
    list-style-type: none;
    color: white;
}

#currentImage {
    width: 75px;
    height: 75px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.inventory-item {
    width: 75px;
    height: 75px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.item-common-image-glow {
    border: 1px solid rgb(192, 192, 192);
    box-shadow: 0 0 10px rgb(192, 192, 192);
}

.item-uncommon-image-glow {
    border: 1px solid rgb(0, 221, 0);
    box-shadow: 0 0 10px rgb(0, 221, 0);
}

.item-rare-image-glow {
    border: 1px solid rgb(0, 112, 221);
    box-shadow: 0 0 10px rgb(0, 112, 221);
}

.item-epic-image-glow {
    border: 1px solid rgb(195, 0, 255);
    box-shadow: 0 0 10px rgb(195, 0, 255);
}

.item-legendary-image-glow {
    border: 1px solid rgb(255, 196, 0);
    box-shadow: 0 0 10px rgb(255, 196, 0);
}

.item-remarkable-image-glow {
    border: 1px solid rgb(255, 39, 39);
    box-shadow: 0 0 10px rgb(255, 39, 39);
}

.item-Common-image-glow {
    border: 1px solid rgb(192, 192, 192);
    box-shadow: 0 0 10px rgb(192, 192, 192);
}

.item-Uncommon-image-glow {
    border: 1px solid rgb(0, 221, 0);
    box-shadow: 0 0 10px rgb(0, 221, 0);
}

.item-Rare-image-glow {
    border: 1px solid rgb(0, 112, 221);
    box-shadow: 0 0 10px rgb(0, 112, 221);
}

.item-Epic-image-glow {
    border: 1px solid rgb(195, 0, 255);
    box-shadow: 0 0 10px rgb(195, 0, 255);
}

.item-Legendary-image-glow {
    border: 1px solid rgb(255, 196, 0);
    box-shadow: 0 0 10px rgb(255, 196, 0);
}

.item-Remarkable-image-glow {
    border: 1px solid rgb(255, 39, 39);
    box-shadow: 0 0 10px rgb(255, 39, 39);
}

.imgShop {
    width: 300px;
    height: 200px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.inventory-icon {
    font-size: 1.5em;
    color: thistle;
    cursor: pointer;
}

.square {
    background-color: #4c00ff;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;

}

.nav-ruler {
    border-bottom: 1px solid #8c7fff;
    margin: 0;
}

.page-header {
    margin-top: .5em;
    color: #8c7fff;
    text-decoration: underline;
    text-transform: capitalize;
        font-family: "Lobster", sans-serif;
        font-weight: 400;
        font-style: normal;     
}

.shop-welcome {
    color: white;
}

.card {
    display: inline-block;
    width: 300px;
    margin-top: 1em;
    background-color: #240f1b;
    color: white;
}

.highlight:hover {
    border-top: #8c7fff 1px solid;
    border-bottom: #8c7fff 1px solid;
    cursor: pointer;
}

.livingarea {
    background: url("/images/livingarea.png");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    min-height: 275px;
}

.garage {
    background: url("/images/garage.png");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    min-height: 275px;
}

.bedroom {
    background: url("/images/bedroom.png");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    min-height: 275px;
}

.garden {
    background: url("/images/garden.png");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    min-height: 275px;
}

.card-darken {
    background-color: rgba(0, 0, 0, 0.7);
    margin: 0 auto;
    padding: 3px 6px;
    width: fit-content;
    border-radius: 10px;
}

.card-title {
    text-align: center;
    margin-top: .2em;
    text-decoration: underline;
    color: #dca1ee;
}

.bg-primary {
    background-color: #4c00ff !important;
}

.btn-primary {
    background-color: #4c00ff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 1em;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #330f88 !important;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 1em;
    cursor: pointer;
}

.btn-danger {
    background-color: #810101;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 1em;
    cursor: pointer;
}

.btn-danger:hover {
    background-color: rgb(95, 0, 5) !important;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 1em;
    cursor: pointer;
}

a {
    text-decoration: underline;
    color: #8c7fff;
    transition: ease-in-out .2s;
}

a:hover {
    text-decoration: underline;
    color: white;
    transition: ease-in-out .2s;
}

.collection-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.collection-header {
    background-color: #3a2e49;
    margin: 2em;
    max-width: fit-content;
    margin-top: 1em;
    border-radius: 10px;
    padding: .6em;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 5px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.collection-header-img {
    width: 75px;
    height: 75px;
    border-radius: 3px;
    margin-right: 1em;
    filter: grayscale(100%) blur(4px);
}

.upper-case {
    text-transform: capitalize;
}

.item-owned {
    filter: grayscale(0%);
}

.game-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
}

.play-panel {
    background-color:#240f1b;
    max-width: 290px;
    height: 400px;
    padding: 2em;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 5px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.bg-dark {
    background-color: #13070e !important;
}

.nav-wrapper {
    display: flex;
    justify-content: center;
    margin-top: .5em;
}

.top-nav {
    list-style: none;
    display: flex;
}

.tn-link a {
    text-decoration: none;
    color: #bcb9be;
    margin-left: 1em;
    transition: ease-in-out .2s;
}

.tn-link a:hover {
    color: white;
    transition: ease-in-out .3s;
}

.warning {
    max-width: 700px;
    background-color: #240f1b;
    padding: 30px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.inventory-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
    margin-bottom: 1em;
}

.inventory-panel {
    background-color: #240f1b;
    padding: 30px;
    border-radius: 10px;
    max-width: fit-content;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.stats-panel {
    display: flex;
    justify-content: center;
    background-color: #4c00ff;
    padding: 10px;
    border-radius: 10px;
    max-width: fit-content;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

}

.stat-list {
    list-style-type: none;
    padding: 0px 10px;
}

.bold {
    font-weight: bold;
}

.fadeInOut {
    animation: fadeInOut 2s;
}

.fadeOut {
    animation: fadeOut 2s;
}

.slideUp {
    animation: slideUp 2s;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#foundAlert {
    display: none;
}


.alert-item
{
    position: absolute;
    font-size: small;
    border: 1px solid rgba(186, 6, 241, 0.46);
    background-color: rgba(73, 7, 149, 0.122);
    box-shadow: 0px 0px 2px #330f88;
    color: whitesmoke;
    text-shadow: 2px 1px #00040a;
    cursor:pointer;
    max-width: fit-content;
    top: 0px;
    right: 0px;
    margin-top: 5px;
    margin-right: 5px;
    padding: 10px 5px;
}


.alert-item:hover{
  background-color: rgba(72, 12, 90, 0.46);
  transition:0.5s;
}

#commonList {
    margin: 0;
    list-style: none;
    padding: 0;
}

#commonList li {
    margin: 0;
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
    justify-items: center;
    align-items: start;
    padding: 1rem;
  }

.equipment-slot {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px;
    width: 130px;
    min-height: 150px;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
  }

  .unequip-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  border: 1px solid #ff4d4d;
  border-radius: 6px;
  padding: 2px 6px;
  color: #ff4d4d;
  cursor: pointer;
  font-size: 14px;
  z-index: 10;
}
.unequip-btn:hover {
  background: rgba(255, 0, 0, 0.7);
  color: #fff;
}

  .equip-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  border: 1px solid #4dff91;
  border-radius: 6px;
  padding: 2px 6px;
  color: #42ff8a;
  cursor: pointer;
  font-size: 14px;
  z-index: 10;
}
.equip-btn:hover {
  background: rgba(0, 255, 128, 0.7);
  color: #fff;
}

.inventory-slot {
  position: relative;
}


 .inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
    justify-items: center;
    align-items: start;
    padding: 1rem;
  }

  .inventory-slot {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px;
    width: 130px;
    min-height: 150px;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
  }

  .inventory-slot:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.08);
    border-color: #e91e63;
  }

  .inventory-slot.empty-slot {
  background-color: #2c2c2c; /* dark gray background */
  border: 1px dashed #555;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px; /* match your item slot height */
  width: 100px; /* match your item slot width */
  color: #888;
  font-size: 0.85rem;
  text-align: center;
}

.inventory-slot.empty-slot:hover {
  background-color: #3a3a3a;
  border-color: #777;
  cursor: default;
}

  .inventory-item {
    width: 64px;
    height: 64px;
    object-fit: contain;
  }

  .item-name {
    font-weight: bold;
    margin-top: 6px;
  }

  .inventory-actions {
    margin-top: 5px;
  }

  .inventory-actions i {
    margin: 4px;
    cursor: pointer;
    transition: color 0.2s;
  }

  .inventory-actions i:hover {
    color: gold;
  }

.collection-box {
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
    justify-items: center;
    margin-top: 1rem;
    width: 100%;
}

.collection-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    min-height: 120px;
    padding: 5px;
    border-radius: 8px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.collection-slot:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px currentColor;
}

.collection-item {
    width: 64px;
    height: 64px;
    margin-bottom: 5px;
}

.item-name {
    font-size: 0.85rem;
    text-align: center;
}

/* Rarity-based glow (reuse from inventory) */
.item-Common-image-glow { box-shadow: 0 0 6px rgb(192, 192, 192); border: 1px solid rgb(192, 192, 192); }
.item-Uncommon-image-glow { box-shadow: 0 0 6px rgb(0, 221, 0); border: 1px solid rgb(0, 221, 0); }
.item-Rare-image-glow { box-shadow: 0 0 6px rgb(0, 112, 221); border: 1px solid rgb(0, 112, 221); }
.item-Epic-image-glow { box-shadow: 0 0 6px rgb(195, 0, 255); border: 1px solid rgb(195, 0, 255); }
.item-Legendary-image-glow { box-shadow: 0 0 6px rgb(255, 196, 0); border: 1px solid rgb(255, 196, 0); }
.item-Remarkable-image-glow { box-shadow: 0 0 6px rgb(255, 39, 39); border: 1px solid rgb(255, 39, 39); }

.item-Common-image-glow:hover,
.item-Uncommon-image-glow:hover,
.item-Rare-image-glow:hover,
.item-Epic-image-glow:hover,
.item-Legendary-image-glow:hover,
.item-Remarkable-image-glow:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px currentColor;
    transition: all 0.25s ease;
}


  .fa-gift {
    color: #e91e63;
  }
  .fa-shopify {
    color: #e91e63;
  }
  .fa-fire {
    color: #e91e63;
  }

  .music-btn {
     transform: scale(0.80);
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: none;
    background: #9c27b0;
    color: white;
    font-size: 1.4rem;
    box-shadow: 0 0 15px rgba(255, 0, 179, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease-in-out;
    z-index: 9999;
}

.music-btn:hover {
    transform: scale(0.90);
}

.music-btn.muted {
    background: #7b268a;
}

.eq-container {
    position: fixed;
    bottom: 28px;
    right: 85px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 9999;
}

.eq-bar {
    width: 5px;
    background: #9c27b0;
    border-radius: 3px;
    height: 8px;
    transition: height 0.15s ease-out, opacity 0.15s;
    box-shadow: 0 0 5px #9c27b0;
}

.eq-container.muted .eq-bar {
    height: 6px;
    opacity: 0.3;
}

.game-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
    margin-top: 1.5em;
}

/* GAME WINDOW FIXED WIDTH */
.play-panel {
    width: 420px;
}

.history-panel {
  background: url('/images/bg/wooden.png');
  background-size: cover;
    width: 250px;
    max-height: 200px;
    overflow-y: auto;
  padding: 10px 15px;
  border: 3px solid #8b6238;
  border-radius: 10px;
  font-family: 'Belwe', serif;
  color: #3a2715;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.4);

}

.item-list-history {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.item-tooltip {
  position: fixed;
  z-index: 99999;
  background: rgba(22, 10, 28, 0.97);
  border: 2px solid #9c78ff;
  border-radius: 10px;
  padding: 12px;
  width: 230px;
  color: white;
  pointer-events: none;
  box-shadow: 0 0 25px rgba(140, 127, 255, 0.5);
  font-family: "Trebuchet MS", sans-serif;
}

.item-tooltip img {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.tooltip-name {
  font-size: 1.1em;
  font-weight: bold;
}

.tooltip-desc {
  margin-top: 8px;
  font-size: 0.9em;
  opacity: 0.85;
}

#item-list-history li {
   cursor: pointer;
   color: saddlebrown;
}

#item-list-history li {
    transition: transform 0.15s ease, background 0.15s ease;
}

#item-list-history li:hover {
    background-color: #3a2e49;
    cursor: pointer;
    transform: translateX(6px);  /* smooth slide to the right */
}

/* Rarity Colors */
.tooltip-rarity.Common      { color: rgb(192,192,192); }
.tooltip-rarity.Uncommon    { color: rgb(0,221,0); }
.tooltip-rarity.Rare        { color: rgb(0,112,221); }
.tooltip-rarity.Epic        { color: rgb(195,0,255); }
.tooltip-rarity.Legendary   { color: rgb(255,196,0); }
.tooltip-rarity.Remarkable  { color: rgb(255,39,39); }

.ruby-popup {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,0,128,0.85);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  z-index: 9999;
  animation: fadeRuby 1.4s ease-out forwards;
}

@keyframes fadeRuby {
  0% { opacity: 1; transform: translateX(-50%) scale(1); }
  80% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}


/* ===== SHOP PAGE LAYOUT ===== */

.shop-header {
    text-align: center;
    margin-top: 20px;
}

.shop-header img {
    width: 220px;
    margin-top: 10px;
}

.shop-description {
    max-width: 700px;
    margin: 20px auto 30px auto;
    text-align: center;
    line-height: 1.5;
    font-size: 1rem;
    color: white;
}

.ruby-card {
    max-width: 380px;
    margin: 0 auto 40px auto;
    padding: 15px;
    border-radius: 12px;
    background: #240f1b;
    color: white;
    text-align: center;
    box-shadow: 0 0 15px rgba(255, 0, 139, 0.3);
}

.ruby-card img {
    max-width: 180px;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.shop-section-title {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #dca1ee;
    text-decoration: underline;
}

.passives-wrapper {
    max-width: 900px;
    margin: 0 auto 3rem auto;
}

.passive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
}

.passive-card {
    background-color: #240f1b;
    border-radius: 10px;
    padding: 15px;
    color: white;
    text-align: center;
    box-shadow: rgba(0,0,0,0.25) 0px 4px 6px;
}

.passive-card h5 {
    color: #dca1ee;
    text-decoration: underline;
    margin-bottom: 10px;
}

.passive-card p {
    font-size: 0.9rem;
}

.materials-panel {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.material {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shard-img {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

/* Modal background overlay */
.game-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.game-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Modal window */
.game-modal-content {
  background: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
  border: 2px solid #5c4a16;
  border-radius: 12px;
  padding: 20px 30px;
  min-width: 280px;
  max-width: 420px;
  color: #fff;
  text-align: center;
  position: relative;

  /* Subtle glow */
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.35),
    0 0 8px rgba(255, 215, 0, 0.15);
  
  animation: modalPop 0.3s ease;
}

@keyframes modalPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Close button */
#modalClose {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  font-size: 22px;
  color: #ffd700;
  transition: 0.2s ease;
}

#modalClose:hover {
  color: #ffffff;
  transform: scale(1.15);
}

/* Shard icons inside modal */
.shard-img-small {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 6px;
}

/* XP and shard text */
.color-green {
  color: #42ff8a;
}

.color-red {
  color: #ff6b6b;
}

.color-gold {
  color: #ffd700;
}

/* LOOT WHEEL */
.loot-wheel {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  animation: wheel-rotate 1.5s linear infinite;
}

.wheel-icon {
  position: absolute;
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 217, 4, 0.8);
}

/* Position each symbol around the wheel */
.icon1 { top: 0; left: 50%; transform: translateX(-50%); }
.icon2 { right: 0; top: 50%; transform: translateY(-50%); }
.icon3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.icon4 { left: 0; top: 50%; transform: translateY(-50%); }

/* Spin animation */
@keyframes wheel-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#searchTimer {
    font-size: 1em;
    color: #8c7fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 2px;
    border-radius: 5px; 
}