/* CSS Cog: equipment.css */
/* Custom modifiers */
.custom-mods-section{margin-top:0.5em;padding-top:0.5em;border-top:1px solid rgba(63,65,71,0.4);}
.custom-mods-list{display:flex;flex-wrap:wrap;gap:0.4em;}
.custom-mod-tag{display:inline-flex;align-items:center;gap:0.3em;background:rgba(240,178,50,0.15);border:1px solid rgba(240,178,50,0.4);border-radius:var(--radius-sm);padding:0.2em 0.6em;font-size:0.75em;color:var(--accent-amber);font-family:var(--font-code);}
.custom-mod-x{cursor:pointer;font-size:1.1em;line-height:1;color:#000;background:rgba(0,0,0,0.3);border-radius:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center;margin-left:0.2em;}.custom-mod-x:hover{background:var(--accent-red);color:#fff;}

.wpn-rolls{display:flex;gap:0.75em;align-items:center;margin:0.3em 0 0.5em;}
.wpn-roll-btn{display:inline-flex;align-items:center;gap:0.3em;cursor:pointer;font-size:0.8em;color:var(--accent-amber);transition:color 0.15s;}.wpn-roll-btn:hover{color:var(--accent-cyan);}

/* ============================================================
   EQUIPMENT ACTIONS
   ============================================================ */
.btn-unequip{display:inline-flex;align-items:center;gap:0.2em;padding:0.15em 0.5em;border-radius:4px;background:rgba(240,178,50,0.1);border:1px solid rgba(240,178,50,0.3);color:var(--accent-amber);font-size:0.65em;font-family:var(--font-display);font-weight:700;letter-spacing:0.06em;cursor:pointer;transition:all 0.15s;margin-left:0.5em;}
.btn-unequip:hover{background:rgba(240,178,50,0.2);color:#ffd060;}

/* ============================================================
   DEFENSE BOXES
   ============================================================ */
.defense-row{display:flex;gap:0.75em;margin:0.75em 0;}
.def-box{flex:1;background:var(--bg-darkest);border:1px solid var(--border-thin);border-radius:var(--radius-sm);padding:0.5em;text-align:center;}
.def-box .def-label{font-family:var(--font-display);font-size:0.7em;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);}
.def-box .def-value{font-family:var(--font-code);font-size:1.6em;font-weight:700;color:var(--accent-cyan);}
.def-box-mdef .def-value{color:var(--accent-blue);}

.twin-shields-attack{margin:0.4em 0;padding:0.4em 0.6em;background:rgba(87,242,135,0.06);border:1px solid rgba(87,242,135,0.15);border-radius:var(--radius-sm);}



/* ============================================================
   TWIN SHIELDS
   ============================================================ */

/* ============================================================
   ITEM NAME LINKS (clickable names in inventory + equipment)
   ============================================================ */
.item-name-link {
  color: var(--accent-cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,180,216,0.3);
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.item-name-link:hover {
  color: var(--accent-amber);
  border-bottom-color: var(--accent-amber);
}

/* ============================================================
   ITEM DETAIL MODAL (read-only view, opened by clicking names)
   ============================================================ */
.item-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 2em 1em;
}

.item-detail-box {
  background: var(--bg-dark, #2b2d31);
  border: 1px solid var(--border-thin, #3f4147);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.2em 1.5em;
}

.item-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.8em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--border-thin, #3f4147);
}
.item-detail-title h3 {
  font-family: var(--font-display);
  font-size: 1.2em;
  color: var(--text-primary);
  margin: 0 0 0.3em;
}
.item-detail-badges {
  display: flex;
  gap: 0.4em;
}
.item-detail-type-badge {
  font-family: var(--font-display);
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(0,180,216,0.1);
  border: 1px solid rgba(0,180,216,0.3);
  border-radius: 3px;
  padding: 0.15em 0.5em;
}
.item-detail-rarity-badge {
  font-family: var(--font-display);
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.04);
  border: 1px solid;
  border-radius: 3px;
  padding: 0.15em 0.5em;
}

.item-detail-stats {
  margin-bottom: 0.8em;
}
.item-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3em 0;
  border-bottom: 1px solid rgba(63,65,71,0.4);
}
.item-detail-row:last-child { border-bottom: none; }
.item-detail-row-label {
  font-family: var(--font-display);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.item-detail-row-value {
  font-weight: 700;
  color: var(--text-primary);
}

.item-detail-desc {
  margin-top: 0.6em;
  padding-top: 0.5em;
  border-top: 1px solid var(--border-thin, #3f4147);
}
.item-detail-desc-label {
  font-family: var(--font-display);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3em;
}
.item-detail-desc p {
  color: var(--text-secondary);
  font-size: 0.9em;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

@media (max-width: 600px) {
  .item-detail-box { max-width: 95%; padding: 1em; }
}