.typechart-wrap { max-width: var(--container-wide); margin: 0 auto; padding: 32px 20px 60px; }
.typechart-header { margin-bottom: 24px; }
.typechart-title {
  font-family: var(--font-display); font-size: clamp(30px, 5.5vw, 42px);
  font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px;
}
.typechart-sub { font-size: var(--text-base); color: var(--t2); max-width: 640px; }

.typechart-section { margin-bottom: 36px; }
.typechart-section h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; margin-bottom: 4px; }
.typechart-note { font-size: var(--text-sm); color: var(--t3); margin-bottom: 14px; }

/* Compact tables, sized to their content — no rotated text, no oversized
   headers, narrow enough that most tables need zero horizontal scroll. */
.typechart-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: inline-block; max-width: 100%; }
.typechart-table { border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-2xs); }
.typechart-table th, .typechart-table td { border: 1px solid var(--line); text-align: center; padding: 0; }

.tc-corner { min-width: 60px; padding: 3px 6px !important; background: var(--surface); color: var(--t3); font-size: 8px; line-height: 1.3; }
.tc-col-head-plain { min-width: 28px; max-width: 34px; padding: 4px 1px !important; background: var(--surface); }
.tc-col-head-plain .type-badge { font-size: 8px; padding: 2px 4px; }
.tc-row-head {
  padding: 3px 6px !important; background: var(--surface); text-align: left !important;
  cursor: pointer; transition: background var(--transition);
}
.tc-row-head:hover { background: var(--surface2); }
.tc-none { color: var(--t3); font-family: var(--font-mono); font-size: 10px; padding: 0 4px; }
.tc-count {
  min-width: 28px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--t3);
  background: var(--surface); cursor: pointer; transition: background var(--transition);
}
.tc-count:hover { background: var(--surface2); }

.tc-cell { width: 28px; height: 24px; font-weight: 700; font-size: 9px; }

/* Weak (bad for the defender) = red family; resist (good for the
   defender) = green family — each pair only a "slight" shade apart
   (reusing the existing -d/-b tint tokens, not new colors), immune kept
   as its own neutral gray since "no effect" isn't just "very resisted." */
.mult-weak { background: var(--danger-d); color: var(--danger); }
.mult-weak-strong { background: var(--danger-b); color: var(--danger); }
.mult-resist { background: var(--ok-d); color: var(--ok); }
.mult-resist-strong { background: var(--ok-b); color: var(--ok); }
.mult-immune { background: var(--surface3); color: var(--t3); }
.mult-neutral { color: var(--line2); }

/* ── Tablet/mobile: pin the type-identity columns so the types stay
   visible while the multiplier cells scroll horizontally underneath.
   Fixed widths on the sticky cells make the stacked left-offsets
   predictable — single-type charts stick 2 columns (row-head + count),
   dual-type blocks stick 3 (both row-heads + count). ─────────────── */
@media (max-width: 860px) {
  .tc-row-head { width: 76px; }
  .tc-count { width: 30px; }

  .tc-corner,
  .tc-row-head,
  .tc-count {
    position: sticky; z-index: 2;
    box-shadow: 2px 0 4px -2px var(--shadow-strong);
  }
  .tc-corner, .tc-row-head:first-child { left: 0; }
  #single-chart .tc-count, #home-type-chart .tc-count { left: 76px; }

  .typechart-block .tc-row-head + .tc-row-head { left: 76px; }
  .typechart-block .tc-count { left: 152px; }
}

/* ── Dual-type: jump nav + per-type blocks ─────────────────── */
.typechart-jump { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; }
.typechart-jump a .type-badge { cursor: pointer; }

.typechart-block { margin-bottom: 22px; }
.typechart-block h3 { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: 700; margin-bottom: 8px; }