.tile-letter { font-weight: 800; font-family: system-ui, sans-serif; }
.tile-letter.light { fill: #fff; }
.tile-letter.dark { fill: #14213d; }
.plus-sign { font: 800 72px system-ui, sans-serif; fill: #fff; }
.plus-sign.small { font-size: 56px; }
.parent-label { font-weight: 700; font-family: system-ui, sans-serif; fill: #cfd9ef; }
.ratio-text { font: 800 30px system-ui, sans-serif; fill: var(--gold); }
.ratio-text.small { font-size: 24px; }
.question-mark { font: 800 120px system-ui, sans-serif; fill: var(--gold); }

.pn-builder {
  display: grid;
  grid-template-columns: repeat(3, max(52px, 8cqw));
  grid-auto-rows: max(52px, 8cqw);
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}
.pn-corner, .pn-gamete {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.3em;
}
.pn-corner { color: #9fb4dd; }
.pn-gamete { border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); margin: 8%; }
.pn-gamete.dom { background: #2f2f33; color: #fff; }
.pn-gamete.rec { background: #f6f2ea; color: #14213d; }
.pn-cell {
  font: 800 1.25em system-ui, sans-serif;
  color: #fff;
  background: #1d2b4b;
  border: 2px dashed #6f8bc4;
  border-radius: .6em;
  cursor: pointer;
}
.pn-cell:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pn-cell.black { background: #2f2f33; border-style: solid; color: #fff; }
.pn-cell.white { background: #f6f2ea; border-style: solid; color: #14213d; }
.pn-cell:disabled { cursor: default; }

.litter { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 3em; }
.litter-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; }
.litter-dots.many { gap: 4px; max-width: min(100%, 520px); }
.litter-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
  animation: land .3s ease-out;
}
.litter-dots.many .litter-dot { width: 14px; height: 14px; border-width: 1px; }
.litter-dot.black { background: #2f2f33; }
.litter-dot.white { background: #f6f2ea; }
.litter-counts { margin: 0; text-align: center; }
.litter-counts b { color: var(--gold); }

.tc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: max(8px, 1.4cqw); width: 100%; }
.tc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: .8em;
  border-radius: .9em;
  background: rgba(255, 255, 255, .06);
  border: 2px solid rgba(255, 255, 255, .2);
}
.tc-card.solved { border-color: var(--ok); }
.tc-title { margin: 0; font-weight: 800; color: var(--gold); text-align: center; }
.tc-babies { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 30px; }
.tc-card .lab-tools .chip-btn { font-size: .92em; }

@container (max-width: 620px) {
  .tc-cards { grid-template-columns: 1fr; }
}