.fr-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  width: min(420px, 100%);
  background: #1a3a6b;
  padding: 8px;
  border-radius: 12px;
}

.fr-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
}

.fr-col:disabled { cursor: default; }

.fr-cell {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0e1f3d;
  transition: background 0.15s ease;
}

.fr-col:hover:not(:disabled) .fr-cell.fr-empty { background: #16305c; }

.fr-cell.fr-red { background: radial-gradient(circle at 35% 30%, #ff8a8a, #e63946); animation: fr-drop 0.25s ease; }
.fr-cell.fr-yellow { background: radial-gradient(circle at 35% 30%, #fff3b0, #f4c430); animation: fr-drop 0.25s ease; }

.fr-cell.fr-win { box-shadow: 0 0 0 3px var(--color-primary); }

@keyframes fr-drop {
  0% { transform: translateY(-140%); }
  70% { transform: translateY(6%); }
  100% { transform: translateY(0); }
}