/* ═══════════════════════════════════════════
   SKILLS PAGE
═══════════════════════════════════════════ */

/* skill type accent colors */
:root {
  --type-IMPACT:    #f43f5e;
  --type-DASH:      #5b5ef4;
  --type-SHIELD:    #10b981;
  --type-CANNON:    #f59e0b;
  --type-FLAME:     #ff5200;
  --type-MINE:      #f43f5e;
  --type-TRAIN:     #f59e0b;
  --type-SATELLITE: #8b5cf6;
}

.skills-body {
  flex: 1; display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 0; overflow: hidden;
}
.skills-list {
  padding: 24px 28px; border-right: 1px solid var(--border); overflow-y: auto;
}
.skills-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 18px;
}
.skill-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.skill-card {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px; position: relative;
  border-radius: var(--radius);
  transition: all 0.18s;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--border);
}
.skill-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* colored left border per type */
.skill-card[data-type="IMPACT"]    { border-left-color: var(--type-IMPACT);    }
.skill-card[data-type="DASH"]      { border-left-color: var(--type-DASH);      }
.skill-card[data-type="SHIELD"]    { border-left-color: var(--type-SHIELD);    }
.skill-card[data-type="CANNON"]    { border-left-color: var(--type-CANNON);    }
.skill-card[data-type="FLAME"]     { border-left-color: var(--type-FLAME);     }
.skill-card[data-type="MINE"]      { border-left-color: var(--type-MINE);      }
.skill-card[data-type="TRAIN"]     { border-left-color: var(--type-TRAIN);     }
.skill-card[data-type="SATELLITE"] { border-left-color: var(--type-SATELLITE); }

.skill-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.skill-card-icon { font-size: 20px; }
.skill-card-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; }
.skill-card-type {
  display: inline-block;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 2px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.skill-card-type-IMPACT    { background:#f43f5e18; color:var(--type-IMPACT);    }
.skill-card-type-DASH      { background:#5b5ef418; color:var(--type-DASH);      }
.skill-card-type-SHIELD    { background:#10b98118; color:var(--type-SHIELD);    }
.skill-card-type-CANNON    { background:#f59e0b18; color:var(--type-CANNON);    }
.skill-card-type-FLAME     { background:#ff520018; color:var(--type-FLAME);     }
.skill-card-type-MINE      { background:#f43f5e18; color:var(--type-MINE);      }
.skill-card-type-TRAIN     { background:#f59e0b18; color:var(--type-TRAIN);     }
.skill-card-type-SATELLITE { background:#8b5cf618; color:var(--type-SATELLITE); }

.skill-card-params { font-family: var(--mono); font-size: 11px; color: var(--text-dim); line-height: 2; }

.skill-create-panel { padding: 24px; overflow-y: auto; background: var(--surface); }
.skill-create-panel .section-title { display: block; margin-bottom: 18px; }