/* ============================================================
   CONTAINER INTERIOR — the row/cell grid you sort inside
   The `repeat(5,...)` on .crow is overridden inline by renderContainer()
   to match the run's rowLen; 5 is only the fallback.
============================================================ */
#contGrid{display:grid;gap:6px}
.crow{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  background:rgba(0,0,0,.25);padding:5px;border-radius:9px;
  transition:box-shadow .3s, background .3s;
}
.crow.done{
  background:rgba(245,197,66,.14);
  box-shadow:inset 0 0 0 2px rgba(245,197,66,.55);
}
.crow.flash{animation:rowgold 1s}
@keyframes rowgold{
  20%{box-shadow:0 0 22px 5px rgba(245,197,66,.95), inset 0 0 0 2px rgba(245,197,66,.9);background:rgba(245,197,66,.4)}
}
.cell{
  width:var(--cell,54px);height:var(--cell,54px);
  background:rgba(0,0,0,.28);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cell,54px)*.62);cursor:pointer;position:relative;
  touch-action:none;
}
/* WRONG HOME. Faint on purpose: it has to be readable behind an emoji and it
   sits on screen for as long as the mistake does, so it marks rather than
   scolds. Gold means done, so this is the one other colour with a meaning —
   deliberately a wash plus a hairline, not a hard border, so a row of them
   doesn't turn the container into a grid of alarms. */
.cell.wrong{
  background:rgba(196,74,62,.26);
  box-shadow:inset 0 0 0 1px rgba(226,110,96,.5);
}
.cell.hot{box-shadow:0 0 0 3px rgba(245,197,66,.6)}
.cell.gold{animation:cellgold 1s}
@keyframes cellgold{
  18%{box-shadow:0 0 20px 5px rgba(245,197,66,.95);background:rgba(245,197,66,.5)}
}
.cell.cold{animation:cellcold .45s}
@keyframes cellcold{
  20%{transform:translateX(-5px);background:rgba(143,163,184,.4)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(3px)}
}