#top-row { justify-content: space-between; width: 100%; gap: 8px; }
.slots { display: flex; gap: 6px; }
.slot {
  width: 38px; height: 52px; border-radius: 6px;
  background: #16263c; border: 2px dashed #2b3f5c;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #4d96ff;
}
.cols {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 6px; margin-top: 12px; width: 100%;
}
.fcol { display: flex; flex-direction: column; min-height: 60px; }
.fcol .card { margin-top: -30px; }
.fcol .card:first-child { margin-top: 0; }
.card {
  width: 100%; height: 52px; border-radius: 6px;
  background: #f7f9ff; color: #16263c; border: 1px solid #c3cfe6;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; cursor: pointer; user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.card.red { color: #e23b3b; }
.card.sel { outline: 3px solid #ffd93d; outline-offset: -1px; }
.card.mini { width: 38px; height: 52px; margin: 0; font-size: 16px; cursor: default; }