#type-chart {
  overflow-x: auto;
  margin: 1rem 0;
}

#type-chart table {
  border-collapse: separate;
  border-spacing: 3px;
  width: 100%;
  font-size: 0.9rem;
}

#type-chart th,
#type-chart td {
  text-align: center;
  padding: 0.5rem;
  border-radius: 8px;
  transition: 0.15s ease;
}

#type-chart td {
  font-weight: bold;
}

#type-info {
    position: sticky;
    top: 2rem;
    background: var(--card-bg);
    border: 1px solid var(--main-border-color);
    border-radius: 12px;
    padding: 1rem;
}

#type-chart tr:hover td,
#type-chart tr:hover th {
  filter: brightness(1.15);
}

.super {
  background: #2e7d32;
  color: white;
}

.not-very {
  background: #c62828;
  color: white;
}

.no-effect {
  background: #424242;
  color: white;
}

.normal {
  background: var(--card-bg);
}

.type-normal   { background:#A8A878; color:white; }
.type-fire     { background:#F08030; color:white; }
.type-water    { background:#6890F0; color:white; }
.type-electric { background:#F8D030; color:black; }
.type-grass    { background:#78C850; color:black; }
.type-ice      { background:#98D8D8; color:black; }
.type-fighting { background:#C03028; color:white; }
.type-poison   { background:#A040A0; color:white; }
.type-ground   { background:#E0C068; color:black; }
.type-flying   { background:#A890F0; color:white; }
.type-psychic  { background:#F85888; color:white; }
.type-bug      { background:#A8B820; color:white; }
.type-rock     { background:#B8A038; color:white; }
.type-ghost    { background:#705898; color:white; }
.type-dragon   { background:#7038F8; color:white; }

.highlight {
    background: rgba(255,255,255,.06);
}

.highlight-header {
    filter: brightness(1.15);
}

.hovered-cell {
    outline: 2px solid #ffd54f;
}

.change-card {
    background: var(--card-bg);
    border: 1px solid var(--main-border-color);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.change-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

.change-values {
    display: flex;
    gap: 2rem;
}

.change-value {
    flex: 1;
}

.change-label {
    font-size: .8rem;
    color: var(--text-muted-color);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.change-number {
    font-size: 1.6rem;
    font-weight: bold;
}

.type-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

#type-chart {
    flex: 1;
    min-width: 0;
}

#type-info {
    margin-top: 2rem;
    background: var(--card-bg);
    border: 1px solid var(--main-border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.hover-row,
.hover-col {
    filter: brightness(1.15);
}