/* Select grid: role columns, portrait cells and the two cursor frames. */
.grid-wrap { position: relative; padding: 6px; }
.grid {
  position: relative;
  display: grid; grid-template-columns: repeat(5, var(--cell)); gap: var(--cell-gap);
  outline: none;
}
.grid__row { display: contents; }

.grid__head {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding-inline: 9px;
  background: var(--ink); color: var(--chalk);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.grid__head .t-wide { font-size: clamp(11px, calc(var(--cell) * .16), 15px); font-stretch: 130%; }
/* CS and Streamers role names run to seven letters (VARIETY, ANCHOR), so they set narrower. */
.grid__head.is-long .t-wide { font-size: clamp(9px, calc(var(--cell) * .13), 13px); font-stretch: 100%; }
/* Trim the label to its caps so flex centring lines the icon up with the letters, not the line box. */
.grid__head .t-wide { text-box: trim-both cap alphabetic; }
.grid__head svg { flex: none; width: clamp(12px, calc(var(--cell) * .17), 18px); height: auto; }
.grid__head.is-locked { background: var(--p1); }

/* ---------- cell ---------- */
.cell {
  position: relative; display: grid; grid-template-rows: var(--cell) 22px;
  width: var(--cell); padding: 0;
  background: var(--chalk); border: var(--line) solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform calc(var(--frame) * 2) steps(1, end);
  -webkit-tap-highlight-color: transparent;
}
.cell__art {
  display: block; width: calc(var(--cell) - var(--line) * 2); height: calc(var(--cell) - var(--line) * 2);
  background-repeat: no-repeat; background-color: var(--chalk);
  background-image: none;
}
.cell__name {
  display: grid; place-items: center; background: var(--ink); color: var(--chalk);
  font-size: clamp(9px, calc(var(--cell) * .115), 12px); font-stretch: 118%; white-space: nowrap; overflow: hidden;
}
.cell__mark {
  position: absolute; top: -3px; padding: 3px 5px 2px; font-size: 9px; color: var(--chalk);
  visibility: hidden;
}
.cell__mark--p1 { left: -3px; background: var(--p1); }
.cell__mark--p2 { right: -3px; background: var(--p2); }
.cell:focus-visible { outline: none; box-shadow: 4px 4px 0 var(--ink); }

.flashable::after {
  content: ''; position: absolute; inset: 0; background: var(--chalk); opacity: 0; pointer-events: none;
}
.flashable.is-flash::after { opacity: 1; }

.cell.is-hover-p1 { transform: scale(1.06); z-index: 2; }
.cell.is-hover-p1 .cell__name { background: var(--p1); }
.cell.is-dim { cursor: not-allowed; }
.cell.is-dim .cell__art { opacity: .28; filter: grayscale(1); }
.cell.is-dim .cell__name { background: var(--yellow-deep); color: var(--ink); }
.cell.is-picked-p1 .cell__mark--p1,
.cell.is-picked-p2 .cell__mark--p2 { visibility: visible; }
.cell.is-picked-p1 .cell__name { background: var(--p1); }

/* ---------- cursor frames ---------- */
.cursor {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  visibility: hidden;
}
.cursor.is-on { visibility: visible; }
.cursor::before {
  content: ''; position: absolute; inset: -9px; border: 6px solid currentColor;
  box-shadow: 0 0 0 var(--line) var(--ink), inset 0 0 0 var(--line) var(--ink);
}
.cursor__tag {
  position: absolute; top: -26px; padding: 4px 7px 3px; font-size: 11px; color: var(--chalk);
  background: currentColor; border: 2px solid var(--ink);
}
.cursor--p1 { color: var(--p1); transform-origin: 0 0; }
.cursor--p1::before { animation: cursor-blink .6s steps(2, jump-none) infinite; }
.cursor--p1 .cursor__tag { left: -9px; background: var(--p1); }
.cursor--p2 { color: var(--p2); }
.cursor--p2::before { inset: -3px; border-width: 5px; border-style: solid; }
.cursor--p2 .cursor__tag { right: -3px; top: -21px; background: var(--p2); }
.grid:focus-within .cursor--p1::before { outline: 3px solid var(--chalk); outline-offset: 3px; }
@keyframes cursor-blink { 0% { border-color: var(--p1); } 100% { border-color: var(--chalk); } }

/* ---------- entrance: tiles pop on a stepped stagger, row by row, column by column ---------- */
.grid.is-popped .cell,
.grid.is-popped .grid__head {
  animation: tile-pop calc(var(--frame) * 9) steps(3, end) backwards;
  animation-delay: calc((var(--r, -1) * 3 + var(--c, 0) + 3) * var(--frame));
}
@keyframes tile-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}