/* ---- Type Chart page ----
   Square 19x19 grid (18 types + the corner/label column), living inside
   the floating side panel rather than its own full page now -- capped at
   the panel's own width (see .typechart-panel) and kept square via
   aspect-ratio so it never grows into the "occupies the whole screen"
   sizing the full-page version had. Border/font choices below intentionally
   mirror .matrix-table (the Team Builder's offensive/defensive coverage
   tables) rather than the old page's larger, roomier sizing. */
.typechart-page { width: 100%; aspect-ratio: 1 / 1; }
.typechart-wrap {
  width: 100%; height: 100%; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.typechart-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.864rem; }
.typechart-table th, .typechart-table td {
  border: 1px solid var(--border); text-align: center; padding: 2px; overflow: hidden;
}
/* Row labels are abbreviated the same way column headers already were
   (3 letters, full name in the title tooltip) -- keeping this column the
   same narrow width as every data column is what makes the whole table
   square rather than lopsided, unlike the old full-name row labels. */
/* The corner cell used to have `display: flex` directly on the <th>
   itself -- flexing a table cell breaks its participation in normal
   table layout in most browsers (it stops sizing/aligning like a real
   cell), which is exactly why it rendered as a detached, oddly-shadowed
   card instead of a flush grid cell. Fixed by keeping the <th> a normal
   table cell and moving the flex layout to an inner wrapper div instead
   (.typechart-corner-inner) -- once the corner behaves like a real cell
   again, ordinary table layout rules do the rest: every cell in the
   header row shares that row's height, and table-layout: fixed keeps
   every row-head cell the same width as the corner, both automatically,
   without needing separate width/height rules to keep them in sync. */
.typechart-corner, .typechart-row-head { width: 62px; }
.typechart-corner { background: var(--bg-panel-alt); padding: 3px; }
.typechart-corner-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; height: 100%;
}
.typechart-corner-label {
  font-size: 0.6rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase;
  white-space: nowrap; line-height: 1.2;
}
.typechart-col-head {
  color: #fff; font-size: 0.744rem; font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}
.typechart-row-head {
  color: #fff; font-size: 0.744rem; font-weight: 700; text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.typechart-cell { font-size: 1.05rem; font-weight: 700; color: var(--text-dim); }
/* Green = super effective (good for the attacker), red = not very
   effective (bad for the attacker), gray = immune -- previously reused
   this app's --tier-immune purple, but that read as an unrelated fourth
   color rather than "nothing happens here". Switched to --tier-1x, the
   same neutral gray already standing in for "1x/no effect" everywhere
   else in the app (team page's O/D tables), at the same alpha as the
   super/not-very-effective tints so all three sit at one visual weight.

   color-mix(), not a hand-copied rgba() of each tier color's hex -- an
   earlier version hardcoded the rgb numbers directly, which meant these
   cells silently stopped tracking --tier-half/--tier-4x/--tier-1x the
   moment any of those got retuned elsewhere (exactly what happened here:
   they were still showing a much older, disconnected red long after
   --tier-4x itself had been changed). color-mix reads the variable live,
   so retuning any of those three tokens now updates this table too. */
.typechart-cell-super { background: color-mix(in srgb, var(--tier-half) 55%, transparent); color: #fff; }
.typechart-cell-notvery { background: color-mix(in srgb, var(--tier-4x) 55%, transparent); color: #fff; }
.typechart-cell-immune { background: color-mix(in srgb, var(--tier-1x) 55%, transparent); color: #fff; }

/* Row/column highlight on hovering a type label (see typechart.js's
   wireHoverHighlights) -- a translucent overlay via inset box-shadow
   rather than a plain background-color, so it layers consistently on top
   of every cell regardless of what's already there (colored super/
   not-very/immune cells, colored row/col-head type backgrounds, or plain
   blank 1x cells with no background of their own).

   Tinted with the row's/column's own type color rather than a fixed
   color: every cell in the table carries both `--row-color` and
   `--col-color` custom properties set inline at render time (see
   renderTypeChart in typechart.js), and each rule below just picks
   whichever axis it's for. color-mix() turns that (opaque) type color
   into a translucent tint on the fly rather than needing a second
   pre-mixed color per type. */
.typechart-cell.typechart-hover-row,
.typechart-row-head.typechart-hover-row {
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--row-color) 30%, transparent);
}
.typechart-cell.typechart-hover-col,
.typechart-col-head.typechart-hover-col {
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--col-color) 30%, transparent);
}

/* Pinned row/column (click a type label to toggle, see typechart.js) --
   same translucent, type-colored fill as a plain hover, plus a thin 2px
   border in that same type color traced around the *outside* of the
   whole selected row or column. Declared after the hover rules so a
   pinned row/column that's also currently hovered keeps its border
   rather than the plain hover rule blanking it out (box-shadow doesn't
   merge across separate rules -- the later rule wins the whole property
   when specificity ties).

   The border is built entirely from structural selectors rather than
   extra JS bookkeeping about which cell is "first" or "last":
   - A row's cells are real DOM siblings inside one <tr>, so the left/
     right end-caps just fall out of :first-child (the row-head) and
     :last-child (the rightmost data cell).
   - A column's cells live in different <tr>s, so the same trick runs the
     other way: the top cap is simply `.typechart-col-head` (always the
     one cell at the top of any column), and the bottom cap is picked out
     with `tbody tr:last-child` (the actual last row).
   A cell whose row AND column are both pinned at once (the intersection)
   gets its own combined rule at the end so it draws a full box (row color
   on the top/bottom edges, column color on the left/right ones) rather
   than losing one pair of edges to whichever rule happened to win. */
.typechart-row-head.typechart-row-selected,
.typechart-cell.typechart-row-selected {
  box-shadow:
    inset 0 0 0 999px color-mix(in srgb, var(--row-color) 30%, transparent),
    inset 0 2px 0 0 var(--row-color),
    inset 0 -2px 0 0 var(--row-color);
}
tr > .typechart-row-selected:first-child {
  box-shadow:
    inset 0 0 0 999px color-mix(in srgb, var(--row-color) 30%, transparent),
    inset 0 2px 0 0 var(--row-color),
    inset 0 -2px 0 0 var(--row-color),
    inset 2px 0 0 0 var(--row-color);
}
tr > .typechart-row-selected:last-child {
  box-shadow:
    inset 0 0 0 999px color-mix(in srgb, var(--row-color) 30%, transparent),
    inset 0 2px 0 0 var(--row-color),
    inset 0 -2px 0 0 var(--row-color),
    inset -2px 0 0 0 var(--row-color);
}

.typechart-col-head.typechart-col-selected,
.typechart-cell.typechart-col-selected {
  box-shadow:
    inset 0 0 0 999px color-mix(in srgb, var(--col-color) 30%, transparent),
    inset 2px 0 0 0 var(--col-color),
    inset -2px 0 0 0 var(--col-color);
}
.typechart-col-head.typechart-col-selected {
  box-shadow:
    inset 0 0 0 999px color-mix(in srgb, var(--col-color) 30%, transparent),
    inset 2px 0 0 0 var(--col-color),
    inset -2px 0 0 0 var(--col-color),
    inset 0 2px 0 0 var(--col-color);
}
tbody tr:last-child .typechart-cell.typechart-col-selected {
  box-shadow:
    inset 0 0 0 999px color-mix(in srgb, var(--col-color) 30%, transparent),
    inset 2px 0 0 0 var(--col-color),
    inset -2px 0 0 0 var(--col-color),
    inset 0 -2px 0 0 var(--col-color);
}

/* Intersection cell: its row AND its column are both pinned. Three
   classes = higher specificity than any single- or double-class rule
   above, so this always wins and draws a full box instead of only two
   of the four sides -- top/bottom in the row's color, left/right in the
   column's, and the fill blended from both. */
.typechart-cell.typechart-row-selected.typechart-col-selected {
  box-shadow:
    inset 0 0 0 999px color-mix(in srgb, var(--row-color) 15%, color-mix(in srgb, var(--col-color) 15%, transparent)),
    inset 0 2px 0 0 var(--row-color),
    inset 0 -2px 0 0 var(--row-color),
    inset 2px 0 0 0 var(--col-color),
    inset -2px 0 0 0 var(--col-color);
}

@media (max-width: 1000px) {
  .team-board { grid-template-columns: repeat(3, 1fr); }
  /* .team-coverage-panel is already grid-column: 1 / -1 unconditionally
     (see above) -- no override needed here now that it's one merged panel
     instead of two separately-pinned ones. */
}
@media (max-width: 720px) {
  .team-board { grid-template-columns: repeat(2, 1fr); }
  .team-shiny-bar { grid-template-columns: repeat(2, 1fr); }
  .team-controls { flex-direction: column; align-items: stretch; }
  .team-new-btn { margin-left: 0; }
  .detail-header { flex-direction: column; }
}