body, html{
  height:100%;
  margin:0;
  padding:0;
  background:#1e1e1e;
  color:#f0f0f0;
  font-family:"Times New Roman", Times, Georgia, serif;
  overflow-x:hidden;
}

#darkgem { color: #755099 }
#firegem { color: #ff8420 }
#frostgem { color:#69d2ff }
#explosivegem {color:#ff3f1d}
#lightninggem {color: yellow}
#charmgem {color:#ff66d5}
#bloodgem {color:#970000}
#lightgem {color:#ffffaf;}

.darkgem { color: #755099 !important}
.firegem { color: #ff8420 !important}
.frostgem { color:#69d2ff !important}
.explosivegem {color:#ff3f1d !important}
.lightninggem {color: yellow !important}
.charmgem {color:#ff66d5 !important}
.bloodgem {color:#970000 !important}
.lightgem {color:#ffffaf !important}

main#site-content {
  display:flex;
  flex-direction:column;
  gap:2rem;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:1.5rem 2rem;
  box-sizing:border-box;
}

.title {
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:clamp(1.8rem,2.5vw,2.8rem);
  letter-spacing:.05em;
  font-weight:bold;
  margin:0;
}

.title-logo img{
  height:1em;
  width:auto;
  vertical-align:middle;
  image-rendering:crisp-edges;
}

.title span{
  color:#f0f0f0;
}

#main-layout{
  display:grid;
  grid-template-columns:.55fr 1fr;
  gap:2rem;
  width:100%;
  align-items:start;
}

#left-column, #right-column{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  align-items:stretch;
  height:auto;
}

#selectors{
  display:flex;
  flex-direction:column;
}

#selectors-row1, #selectors-row2, #selectors-row3{
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.icon-button{
  font-family:"Times New Roman", Times, Georgia, serif;
  width:80px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background: url('../images/icon-border.png') no-repeat center;
  background-size: cover;
  color:white;
  font-size:0.87rem;
  transition:.2s ease;
}

.icon-button:hover{
  transform:translateY(-3px);
  filter:brightness(1.1);
}

.icon-button.selected{
  outline:3px solid #fff;
  background-color:green;
}

.icon-button:disabled{
  background-color:#0f0f0f;
  opacity:.5;
  cursor:not-allowed;
}

#skills-section {
  border:2px solid #fff;
  background:#2a2a2a;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

#open-skills{
  background:#1f1f1f;
  border:2px solid #fff;
  padding:.6rem;
  color:#f0f0f0;
  cursor:pointer;
  transition:.2s ease;
}
#open-skills:hover{ background:#333; }

#skills-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
  z-index:200;
}
#skills-popup:not(.hidden){
  display:flex;
}

#skills-popup-window{
  background:#1e1e1e;
  border:2px solid #fff;
  padding:2rem;
  width:90%;
  max-width:700px;
  max-height:80vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  box-shadow:0 6px 20px rgba(0,0,0,.8);
}

#skills-tabs{
  display:flex;
  justify-content:space-evenly;
  gap:.8rem;
}

.skill-tab{
  flex:1;
  text-align:center;
  border:2px solid #fff;
  background:#2a2a2a;
  color:#fff;
  cursor:pointer;
  padding:.6rem;
  transition:.2s ease;
}
.skill-tab:hover{ background:#3a3a3a; }
.skill-tab.selected{
  background:#3a3a3a;
  outline:2px solid #fff;
}

#skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:1rem;
}

.skill-entry{
  background:#2a2a2a;
  border:2px solid #fff;
  padding:.8rem;
  color:#f0f0f0;
  display:flex;
  flex-direction:column;
  transition:.2s ease;
}
.skill-entry:hover{
  background:#3a3a3a;
  transform:translateY(-2px);
}
.skill-entry.selected{
  border-color:#6f6;
  background:#3c503c;
}
.skill-entry.aced{
  border-color:#6af;
  background:#3c3c78;
}

#weapon-stats{
  background:rgba(30,30,30,.95);
  border:2px solid #fff;
  padding:1rem;
  min-width:220px;
  box-sizing:border-box;
  text-align:left;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}

#stats{
  display:grid;
  border:2px solid #fff;
  grid-template-columns:repeat(3, minmax(45px,.5fr));
  background:rgba(30,30,30,.95);
  padding:1rem;
  text-align:left;
  box-sizing:border-box;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  font-size:1em;
}

#share-build, #clear-build, #summarise-build, #save-build, #open-saves, #info, #empty-build, #featured{
  width:9rem;
  border:2px solid #fff;
  background:#2a2a2a;
  color:#fff;
  padding:.6rem;
  cursor:pointer;
  transition:.2s ease;
  font-size:.75em;
}
#share-build:hover, #clear-build:hover, #summarise-build:hover, #save-build:hover, #open-saves:hover, #info:hover, #empty-build:hover,
#featured:hover{
  background:#444;
}


#items {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 100;
  backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: 2rem 1rem;
}
#items.flex {
  display: flex;
}

#popup-window {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  max-width: 1200px;
  background-color: #1e1e1e;
  border: 2px solid #fff;
  box-shadow: 0 5px 18px rgba(0,0,0,0.8);
  padding: 1.5rem;
}

#item-grid,
#reforge-grid,
#gem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 0.9em;
  width: 100%;
  background: #1f1f1f;
  padding: 1rem;
  border: 2px solid #fff;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
  box-sizing: border-box;
}

#gem-grid.hidden,
#reforge-grid.hidden {
  display: none;
}

#tooltip {
  position: fixed;
  pointer-events: none;
  background: rgba(30, 30, 30, 0.95);
  color: #f0f0f0;
  font-size: 0.9rem;
  max-width: 240px;
  border: 2px solid #fff;
  padding: 0.6rem 0.8rem;
  opacity: 0;
  z-index: 1000;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateY(6px);
}
#tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

#points-spent {
  font-weight: bold;
  font-size: 1.2rem;
  color: #ffff66;
  text-align: right;
}

.strength { color: #FF8800; }
.agility { color: #88FF88; }
.dexterity { color: #FFFF00; }
.intellect { color: #0088FF; }
.defense { color: #AAAAAA; }

@media (max-width: 900px) {
  #main-layout {
    grid-template-columns: 1fr;
  }

  .icon-button {
    width: 80px;
    height: 80px;
  }

  #popup-window {
    padding: 1rem;
  }

  #item-grid,
  #reforge-grid,
  #gem-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
}

#highway-son-plush {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 120px;
  height: auto;
  cursor: pointer;
  transition: transform 0.15s ease-in-out;
  z-index: 1000;
}

#highway-son-plush.squished {
  transform: scaleY(0.7) scaleX(1.1);
}

#saves-popup, #info-popup, #featured-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#saves-window, #info-window, #featured-window {
  background: #222;
  padding: 20px;
  width: 350px;
  max-height: 80%;
  overflow-y: auto;
  border: 2px solid white;
}

.hidden {
  display: none !important;
}

h2, h3 {
  margin-top: 10px;
  margin-bottom: 0;
}

#abilities p {
  margin: 0.5em;
}

a:link {
  color: yellow;
  font-weight: bold;
  text-decoration: underline;
}

a:visited {
  color: grey;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  font-style: italic;
}